Question

我正在观看一些关于css的视频教程并找到真正奇怪的东西。首先，我们使用元素之类的链接创建无序列表：

<ul id="menuList">
    <li><a href="google.com">This</a></li>
    <li><a href="demo.org">That</a></li>
    <li><a href="pogoda.ru">Other</a></li>
</ul>

并应用一些样式来创建水平菜单：

#menuList {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menuList a {
    display: block;
    float: left;
}

多数人生产平面菜单。所以我的问题是为什么这有效？在我看来，float应该应用于 li 元素 - 容器。 li 是块级元素，或者我错了???

一些CSS规则让我发疯。

Answer 1

如果您不熟悉CSS，这里发生的事情并不一定容易理解。

您的li元素是块元素，没有浮动。您的a元素是带浮动的内联元素。

a标记的浮动意味着它不再向父li发出关于li应该有多高的任何信号。实际上，它已被部分抬离垂直堆栈。

（旁注：这就是为什么浮动之后清除的重要性。如果你在每个之后放一个清晰的元素（即应用了clear: both的元素），效果你目前看到会丢失，因为父li会使用那个清晰的标记来表明自己有多高。）

这意味着每个li实际上都没有高度，从而产生每个a标记与其a标记表兄弟相邻的效果。这仅仅是li标签没有高度的侥幸。

这可以让人们对CSS有所了解。

就我个人而言，我会说你不需要浮动a标签而不是li（这是我建议你做的），并认为这是一个值得怀疑的教程原因。

使用css定型ul - 为什么浮动工作就像那样

1 个答案: