오버 플로우 래퍼에 떠있는 요소가 숨겨진 것으로 설정되었습니다.

Question

페이지에서 한 번에 6 개의 이미지 만 표시해야하는 시나리오가 있습니다. 당신이 다음 버튼을 클릭하면,이 여섯 개 이미지는 슬라이드 아웃되고 다음 6 개 이미지에 밀어 것입니다. 여기에 내 HTML

<div class="thumbScroll"> 
    <ul class="featuredThumbs"> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-01.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-02.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-03.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-04.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-05.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-06.jpg"></li> 
    </ul> 
    <ul class="featuredThumbs"> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-07.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-08.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-09.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-10.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-11.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-12.jpg"></li> 
    </ul> 
    <ul class="featuredThumbs"> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-13.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-14.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-15.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-16.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-17.jpg"></li> 
     <li> 
      <img src="/App_Themes/2011/images/home-prop-thumb-18.jpg"></li> 
    </ul> 
</div> 

입니다

나는 가정 것이라고 나는 왼쪽으로 .featuredThumbs을 떴다 경우 , 인라인으로 표시됩니다. 그런 다음 한 번에 6 개 항목 만 표시되도록 숨겨진 오버플로가있는 thumbScroll이라는 래퍼가 있습니다. 이 포장지에는 높이와 너비가 있습니다.

그래서 다음 버튼을 클릭하면 처음 6 개는 왼쪽에서 나오고 다음 6 개는 오른쪽에서 슬라이드합니다.

내 문제는이 경우 모든 18 개의 항목이 서로 아래에 있고 왼쪽으로 떠 있지 않다는 것입니다.

어떻게 오버플로가 숨김으로 설정된 래퍼의 왼쪽에 항목을 플로팅합니까?

Answer 1

랩퍼 닫기 직전에 <br style="clear:both" />을 시도하십시오.

Answer 2

나는 float : left를 사용했는지 묻는 것이 어리석은 일이라고 추정합니다. 너에게 리의 요소들? 어쨌든, 당신의 CSS를 보는 것이 정말 좋을 것입니다.

Answer 3

컨테이너 내 ul 요소 주위에 div을 넣으십시오. 부여 이것은 다음과 같은 CSS를 div에 :

.theDiv { 
    white-space: nowrap; 
} 

그런 다음이 CSS를 사용

.featuredThumbs { 
display: inline-block; 
/* remove float */ 
} 

theDiv 모든 ul의 다음 서로에 포함됩니다 만 래퍼에 맞게 그들 표시됩니다 사업부를 .