9

我正在尝试从 ul 对象创建一个轮播，其中 li 元素是块，ul 是轮播容器。我尝试了两种方法，但似乎更有效，溢出属性没有按我想要的那样运行。

方法一：

    <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 元素中的 display:block 造成的，但它们需要具有固定的宽度/高度，有没有办法解决这个问题？

方法二：

.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 元素并将它们的位置设置为绝对值，但随后 overflow:hidden 属性被“忽略”，因为 li 元素仍然显示在 ul 容器边界之外。

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

4

2 回答 2

8

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

Also, you can remove the display: block on the list items. The display property is largely ignored on floats.

于 2009-08-19T07:54:45.130 回答
3

我没有看到 display:hidden 在您的第二种方法中添加...

需要在父级上设置溢出属性<ul>才能隐藏溢出的列表元素。

对于您的第一种方法，我建议使用外部<div>. 这将是边界框，隐藏溢出的 li 元素。

<div style="overflow: hidden; width: 200px; height: 120px;">
   <ul style="height: 120px;">
      <li>Whatever</li>
      <li>More stuff</li>
      <li>Even more</li>
   </ul>
</div>

然后像以前一样应用列表元素样式，包括浮动和块。

于 2009-08-19T07:35:30.677 回答