html - ul 大小不在所有子元素周围

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如果它们是 block ，因为它们不会生成插入 <ul> 的盒子 block 的底部。

并且不要使用 top: 9px ，因为那会移动 <li>向下，外面<ul> .