Question

我试图制作一个标签式导航元素，在html中显示如下：

<ul class="nav">
    <li class="selected">Selected Tab</li>
    <li><a href="#">Not-selected Tab</a></li>
    <li><a href="#">Not-selected Tab</a></li>
</ul>

您可以看到我所做的here的精简版。

我的问题是：为什么ul不足以容纳所有li元素？它似乎不受添加到li元素的任何边框或填充的影响。

Answer 1

而不是

.nav li {
    display: inline;
    top: 9px;
}

使用

.nav li {
    display: inline-block;
}

Demo

如果他们是块，请不要使用inline，因为他们不会生成推动<ul>底部的框区块。

并且不要使用top: 9px，因为<li>向下移动<ul>以外。

Answer 2

问题是你在li上放置填充，而它们仍然是内联元素。此外，您正在使用top: 8px，这使问题进一步复杂化。有几个选项可以修复。 1：您创建li的{{1}}并删除display: inline-block，或2.您浮动top: 8px（并使用li上的clearfix ）。希望这是有道理的。

option 1 demo

option 2 demo

英国大小不是所有儿童元素

2 个答案: