我正在尝试从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;"> </li>
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;"> </li>
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;"> </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"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 100px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 200px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 300px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 400px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 500px;" class="ui-carousel-element ui-widget-content"> </li>
</ul>
我使用javascript来分发li元素并将它们的位置设置为绝对值,然后溢出:隐藏属性被“忽略”,因为li元素仍然显示在ul容器边界之外。
所以问题是如何让ul水平堆叠固定大小的li块并隐藏那些溢出的块?
答案 0 :(得分:8)
在第二种方法中将position: relative
添加到.ui-carousel
。绝对定位的元素从流程中取出。如果您没有相对定位ul
,则列表项相对于视口定位,忽略其父级的溢出。
此外,您可以删除列表项上的display: block
。 The display property is largely ignored on floats.
答案 1 :(得分:3)
我没有看到显示:隐藏在第二种方法中添加了......
需要在父<ul>
上设置overflow属性,以便隐藏溢出的列表元素。
对于您的第一种方法,我建议使用外部<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>
然后像以前一样应用列表元素样式,使用浮点数和块。