溢出:隐藏不适用于ul内的li元素

Question

我正在尝试从ul对象创建一个轮播,其中li元素是块,ul是轮播容器.我已经尝试了两种方法但是neather似乎工作,溢出属性不能正常运行.

方法1:

    <ul style="overflow:hidden; width:200px; height:120px; display:block;">
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
    </ul>

这种方法的问题是元素在溢出时不会水平堆叠(这是我想要/期望的).我怀疑这是由于显示:li元素中的块,但是它们需要有固定的宽度/高度,有没有办法解决这个问题？

方法2:

.ui-carousel
{
    display:block;
    overflow: hidden;
    list-style: none;
}

.ui-carousel-element
{
    margin:0;
    padding:0;
    display:block;
    border:2px solid black;
    float:left;
}

<ul style="width: 200px; height: 120px; padding-top: 20px;" id="pages" class="ui-widget ui-carousel">
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 0px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 100px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 200px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 300px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 400px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 500px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
</ul>

我使用javascript来分发li元素并将它们的位置设置为绝对值,然后溢出:隐藏属性被"忽略",因为li元素仍然显示在ul容器边界之外.

所以问题是如何获得ul水平堆栈固定大小的li块并隐藏溢出的块？

Answer 1

添加position: relative到.ui-carousel第二种方法中.绝对定位的元素从流程中取出.如果您没有相对定位ul,则列表项相对于视口定位,忽略其父级上的溢出.

此外,您可以删除display: block列表项目.浮动显示属性在很大程度上被忽略.