Html 溢出：隐藏不适用于 ul 中的 li 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1298285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow:hidden not working for li elements inside ul
提问by Rafael Muniti?
I'm trying to create a carousel from ul object where the li elements are blocks and ul is the carousel container. I've tried two approaches but neather seems to work, the overflow property is not functioning as I want it to.
我正在尝试从 ul 对象创建一个轮播，其中 li 元素是块，ul 是轮播容器。我已经尝试了两种方法，但似乎更有效，溢出属性没有按我想要的方式运行。
Approach 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>
The problem with this approach is that elements don't stack horizontally when they overflow (which is what I want/expected). I suspect this is due to the display:block in the li elements, but they need to have fixed width/height, is there a way around this ?
这种方法的问题是元素在溢出时不会水平堆叠（这是我想要/期望的）。我怀疑这是由于 li 元素中的 display:block 造成的，但它们需要具有固定的宽度/高度，有没有办法解决这个问题？
Approach 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>
I use javascript to distribute the li elements and set their positions to absolute but then the overflow:hidden property is 'ignored' because li elements still show up outside of the ul container bounds.
我使用 javascript 来分发 li 元素并将它们的位置设置为绝对，但随后溢出：隐藏属性被“忽略”，因为 li 元素仍然显示在 ul 容器边界之外。
So the question is how to get ul to horizontally stack fixed size li blocks and hide the ones that overflow ?
所以问题是如何让 ul 水平堆叠固定大小的 li 块并隐藏溢出的块？
采纳答案by mercator
Add position: relativeto the .ui-carouselin your second approach. Absolutely positioned elements are taken out of the flow. If you don't relatively position the ul, the list items are positioned relative to the viewport, ignoring the overflow on their parent.
添加position: relative到.ui-carousel您的第二种方法中。绝对定位的元素被从流中取出。如果您不相对定位ul，则列表项将相对于视口定位，忽略其父项上的溢出。
Also, you can remove the display: blockon the list items. The display property is largely ignored on floats.
此外，您可以删除display: block列表项上的 。在浮动上，显示属性在很大程度上被忽略。
回答by peirix
I don't see a display:hidden added in your second approach...
我没有看到 display:hidden 添加在您的第二种方法中...
The overflow property needs to be set on the parent <ul>for the overflowing list-elements to be hidden.
需要在父级上设置溢出属性<ul>才能隐藏溢出的列表元素。
And for your first approach, I'd recommend using an outer <div>. This would be the bounding box, hiding overflowing li-elements.
对于您的第一种方法，我建议使用外部<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>
Then apply the list element styles as before, with floats and blocks.
然后像以前一样应用列表元素样式，使用浮动和块。
