gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:43:59 27 4
gpt4 key购买 nike

我正在尝试从 ul 对象创建一个旋转木马,其中 li 元素是 block ,而 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 block 并 overflow hidden 的 block ?

最佳答案

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

此外,您还可以删除列表项上的display: blockThe display property is largely ignored on floats.

关于html - 溢出:隐藏不适用于 ul 内的 li 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1298285/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com