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，并且只显示适合您的包装的那些。

Answer 2

在关闭包装器之前尝试<br style="clear:both" />。

Answer 3

我认为你问你是否使用了浮动是很愚蠢的。你的元素？无论如何，看到你的CSS真的很棒。

浮动元素留在溢出包装器中设置为隐藏

3 个答案: