0

我正在看一些关于 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;
}

那就是产生平面菜单。所以我的问题是为什么这有效？在我看来，浮动应该应用于li元素 - 容器。li是块级元素还是我错了？？？

一些 CSS 规则让我抓狂。

4

1 回答 1

1

如果您是 CSS 新手，这里发生的事情不一定容易理解。

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

标签的浮动a意味着它不再向父母提供任何关于应该li多高的信号li。实际上，它已部分从垂直堆栈中取出。

（旁注：这就是为什么在浮动之后清除很重要的原因。如果您在每个之后放置一个清除元素（即clear: both应用到它的元素），您当前看到的效果将会丢失，因为父级li会使用该清除作为标记自己有多高。）

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

这可能会让刚接触 CSS 的人有些转折。

就个人而言，我会说在你的情况下不需要浮动a标签而不是li（我建议你这样做），并且因此认为它是一个有问题的教程。

于 2012-07-01T21:33:55.020 回答