센터 이미지가 부 풀릴 때 축소됩니다. Prev/Nxt Arrows Collapsing

Question

내 센터 단추 (이미지)가 접히는 데 문제가 있습니다. 모든 이미지가 영광으로 표시되지 않습니다 (폭 : 200 픽셀). 또한 어떤 이유로 인해 이전 및 다음 화살표가 올바르게 표시되지 않습니다 (전체 이미지와 반대로 2px 20px 만). 내가 지금 몇 시간 동안 이걸로 싸워 왔기 때문에 나는 어떤 통찰력이라도 정말로 감사 할 것이다. 나는 그것이 "The Big 4"(IE, Chrome, FF 및 Opera)에서 발생하기 때문에 인적 오류라고 확신합니다. 또한, 나는 분명히 도움이되는 문제를 설명하기 위해 이미지 ...

내 HTML은 다음과 같다 첨부 :

  <div class="excerpt"> 
      ... 
      <div class="buttons"> 
       <a href="page.html" alt="Description" class="button active left">The Challenge</a> 
       <a href="page.html" alt="Description" class="button">The Solution</a> 
       <a href="page.html" alt="Description" class="button right">Our Expertise</a> 
      </div><!-- end .buttons --> 

      <div class="pagination"> 
       <a href="blog.html" class="prev" alt="previous">&nbsp;</a> 
       <a href="blog.html" alt="1">1</a> 
       <a href="blog.html" alt="2" class="active">2</a> 
       <a href="blog.html" alt="3">3</a> 
       <a href="blog.html" alt="4">4</a> 
       <a href="blog.html" alt="5">5</a> 
       <a href="blog.html" class="next" alt="next">&nbsp;</a> 
      </div><!-- end .pagination --> 

     </div><!-- end #rotator --> 

다음과 같이 위의 CSS는 다음과 같습니다

#rotator .excerpt { 
    float: left; 
    width: 320px; 
    margin: 0 0 0 40px; 
} 

#rotator .buttons { 
    text-align: center; 
    font-size: 20px; 
    clear: both; 
    padding-top: 15px; 
    width: 100%; 
} 

#rotator .button { 
    width: 200px; 
    height: 40px; 
    background-image: url(images/btn.gif); 
    background-repeat: no-repeat; 
    padding: 3px 0 0 0; 
    text-indent: -20px; 
} 

#rotator .button.active { 
    background-image: url(images/active-btn.gif); 
    background-repeat: no-repeat; 
} 

#rotator .button.right { 
    margin-right: -5px; 
} 

#rotator .pagination { 
    clear: both; 
    text-align: center; 
    font-size: 1.2em; 
    font-weight: bold; 
    padding-top: 10px; 
    width: 100%; 
} 

#rotator .pagination a.prev { 
    height: 30px; 
    width: 30px; 
    text-indent: -9999px; 
    background-image: url(images/page-left.png); 
    background-repeat: no-repeat; 
    margin-right: 10px; 
} 

#rotator .pagination a.next { 
    height: 30px; 
    width: 30px; 
    text-indent: -9999px; 
    background-image: url(images/page-right.png); 
    background-repeat: no-repeat; 
    margin-left: 10px; 
} 

Answer 1

@joe을 ; ainline tag 아니요 block tag & 인라인 태그는 높이가없고, 너비는 & 세로 여백 & 패딩을 취하지 않습니다. 따라서 앵커 버튼 prev & next에 display:block을 정의하십시오.

CSS :

#rotator .pagination a.prev, 
#rotator .pagination a.next{ 
display:block; 
}