Html ul大小并非围绕所有子元素

我尝试创建一个选项卡式导航元素，在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>

所选选项卡

你可以看到我所做的精简版

我的问题是：为什么

ul

不够大，无法容纳所有

li

元素？它似乎不受添加到

li

元素的任何边框或填充的影响。

而不是

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

使用

如果它们是块，不要使用

内联

，因为这样它们就不会生成一个推动

底部的框块

不要使用

top:9px

，因为它会向下移动

，在

之外，而不是

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

使用

如果它们是块，不要使用

内联

，因为这样它们就不会生成一个推动

底部的框块

---

不要使用

top:9px

，因为这会向下移动

，在
之外。问题是，当
li
仍然是内联元素时，您在其上添加了填充。此外，您正在使用
top:8px
，这使问题更加复杂。有几个选项需要修复。1：使
li
显示：内联块
并删除
top:8px
，或2。浮动
li
（并在
ul
上使用clearfix）。希望这是有道理的


问题在于，在
li
仍然是内联元素时，您在它们上添加了填充。此外，您正在使用
top:8px
，这使问题更加复杂。有几个选项需要修复。1：使
li
显示：内联块
并删除
top:8px
，或2。浮动
li
（并在
ul
上使用clearfix）。希望这是有道理的


我可能问了一个愚蠢的问题，但是在看了url之后，我可以问你“为什么ul不够大，不能容纳所有的li元素”是什么意思吗？你是在问这样的问题吗@健忘，我不知道该怎么用别的词来表达。ul的底端不等于li的底端，我希望是这样？@Josh是的，完全一样。但为什么这样做有效？你能把它作为一个更详细的回答吗？我可能会问一个愚蠢的问题，但是在看了url之后，我可以问你“为什么ul不够大，不能容纳所有的li元素”是什么意思吗？你是在问这样的问题吗@健忘，我不知道该怎么用别的词来表达。ul的底端不等于li的底端，我希望是这样？@Josh是的，完全一样。但为什么这样做有效？你能再加上一点细节作为回答吗？