html - Li 内容呈现在 ul 容器边界之外

Question

在这个 JsFiddle - https://jsfiddle.net/9qyv03u3/

看起来像这样:

ul {
    width: 20em;
    border: 4px solid gray;
    padding: 0.5em 2em;
    margin: 5em auto;
    list-style: None;
    height: 30px;
}
li {
    float: left;
    margin: 20px 30px 10px 0;
    border-right-style: dotted;
    padding-right : 15px;
}

<ul>
    <li>Questions</li>
    <li>Tags</li>
    <li>Users</li>
</ul>

我可以通过提供 ul {height: 40px;} 将内容放入框内，但菜单项上方的空间仍然比下方的空间大得多。

如何将菜单项放置在 ul 容器的中心？

Answer 1

您看到元素开箱的原因是容器高度塌陷，了解更多信息 here .作为快速修复，您可以简单地设置 ul{overflow:auto;}。

但我建议在 li 上使用 display:inline-block 而不是 float，设置相同数量的顶部和底部 padding，删除height，并在ul 上添加text-align:center。这将确保元素在两个方面都居中。

ul {
    width: 20em;
    border: 4px solid gray;
    list-style: none;
    margin: 5em auto;
    padding: 1em 0;
    text-align: center;
}
li {
    display: inline-block;
    border-right-style: dotted;
    margin-right: 10px;
    padding-right : 15px;
}
/* extra refinement */
li:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}

<ul>
    <li>Questions</li>
    <li>Tags</li>
    <li>Users</li>
</ul>