CSS3 - 溢出:隐藏修复高度?

时间:2014-11-22 07:42:15

标签: html css css3 overflow

我有一个UL,里面有一些项目:

<ul>
    <li><a href="#"><img alt="FaceBook" src="images/facebook.png" /></a></li>
    <li><a href="#"><img alt="Twitter" src="images/twitter.png" /></a></li>
</ul>

它在网页上显示正常,但UL的真实高度为0像素。

enter image description here

仅当我将overflow:hidden参数添加到UL时,高度修正:

enter image description here

我一直认为overflow:hidden只会阻止物品进入收件人之外,但实际上并不会影响收件人的维度。虽然默认高度应该自动高到足以适合所有项目。

问题: 为什么UL默认不具有auto高度,为什么overflow:hidden会影响它?< / p>

1 个答案:

答案 0 :(得分:2)

默认情况下,<ul>占用的空间与其子元素一样多(请参阅http://jsfiddle.net/)。如果您遇到的情况不同,那么您已经应用了一些CSS来破坏默认行为。

如果你float <li>他们的<ul>标签,他们就不会占用任何空间,这会让你overflow: hidden;&#34;消失&#34;。它确实占用了与孩子一样多的空间,但现在孩子们不再占用任何空间,因为它们是浮动的。将<ul>设置为{{1}}是对此的修复。

相关问题