Плавающие элементы, оставленные в оболочке переполнения, установленной на скрытый

Question

У меня есть сценарий, в котором мне нужно показывать только шесть изображений за раз на моей странице. Когда вы нажимаете на следующую кнопку, эти шесть изображений будут выдвигаться, а следующие шесть изображений будут вставляться. Вот мой 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 влево, он бы отображался в строке. Тогда у меня была бы оболочка с именем thumbScroll с переполнением скрытого, чтобы одновременно показывалось только 6 элементов. Эту обертку мне дали высота и ширина.

Чтобы при нажатии на следующую кнопку первые шесть выдвигались влево, а следующие шесть - справа.

Моя проблема в том, что все 18 предметов в этом случае расположены ниже друг друга и не смещены влево.

Как мне переместить эти элементы в обертку слева с переполнением, установленным на скрытый.

Answer 1

поместите div вокруг ваших ul элементов внутри контейнера.Дайте этому div следующий css:

.theDiv {
  white-space: nowrap;
}

Затем также используйте этот css:

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

Div theDiv будет содержать все ul s рядом с друг другом и будет отображатьтолько те, которые вписываются в вашу обертку.

Answer 2

Полагаю, было бы глупо спросить вас, использовали ли вы float: left; на тебя ли элементы? В любом случае, было бы очень приятно увидеть ваш CSS.

Answer 3

Попробуйте <br style="clear:both" /> непосредственно перед закрытием оболочки.