css - 留在溢出包装器中的 float 元素设置为隐藏

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 float 到左侧，则将内联显示。然后，我将有一个名为 thumbScroll 的包装器，带有 hidden 的溢出，以便一次只显示 6 个元素。我给这个包装器指定了高度和宽度。

因此，当我点击下一个按钮时，前六个从左侧滑出，后六个从右侧滑入。

但我的问题是，在这种情况下，所有 18 个元素都在一个之下，而不是向左浮动。

如何在溢出设置为隐藏的包装器中将这些元素 float 到左侧。

Answer 1

在容器内的 ul 元素周围放置一个 div。为这个 div 添加以下 CSS:

.theDiv {
  white-space: nowrap;
}

然后也使用这个 css:

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

div theDiv 将包含彼此相邻的所有 ul，并且将仅显示适合您的包装器的那些。