Question

这是我的CSS内容： -

   <style type = "text/css">
       li
    {
        display:inline;
    }
    .carousel
    {
        position:absolute; 
        white-space:nowrap;

    }
    .sliderGallery
    {
        width:800px;
        overflow:hidden;
        height:100px;

    }
 </style>

这是我的html内容： -

 <div id="sliderGallery" class = "sliderGallery">

        <ul id = "carousel" class="carousel">
            <li>
                <img src ="Images/1.jpg" />
            </li>

            <li>
                        <img src ="Images/2.jpg" />


            </li>

            <li>
                    <img src ="Images/3.jpg" />

            </li>

            <li>
                        <img src ="Images/4.jpg" />

            </li>

            <li>
                        <img src ="Images/5.jpg" />

            </li>

            <li>
                                <img src ="Images/6.jpg" />

            </li>
        </ul>
      </div>

如您所见，我已设置overflow:hidden，但如果超过800px，我的内容仍会显示。我哪里错了？

提前致谢：）

Answer 1

如何为div添加高度呢？

也尝试删除position：absolute;在旋转木马上。

Answer 2

尝试将.sliderGallery更改为CSS中的#sliderGallery

Answer 3

上面的Danixd应该是正确的：设置位置：相对于.sliderGallery（div）会使ul在其中滑动。目前，它相对于外部容器（或者如果没有外部容器）滑动。您也可以尝试为li指定显式宽度。

关于overflow：hidden的简单css问题

3 个答案: