html - 高度随内容展开

Question

我有以下水平菜单:

<nav style="min-height: 50px">
    <ul>
        <li style="display: inline;">
            <a href="" style="float: left;">Link text</a>
        </li>
        ...
    </ul>
</nav>

我想要 <nav>元素高度随其内容展开。现在要解决这个问题，我可以这样做:

<nav style="min-height: 50px">
    <ul>
        <li style="display: inline;">
            <a href="" style="float: left;">Link text</a>
        </li>
        ...
    </ul>
    <br style="clear: both;" />
</nav>

这个“修复”在语义上对我来说并不合适，那么有没有更简洁的方法来实现相同的效果？

Answer 1

对于这种现象确实有更优雅的解决方案。问题是在没有帮助的情况下，父容器不会扩展以包含 float 的子元素。另见我的另一个 answers关于这个话题。

您可以使用 :after 伪类 - 将其添加到您的 CSS 中:

nav:after {
    content: ""; display: block; height: 0; clear: both;
}

或者您可以使用带有 overflow: auto 的解决方案，如 here 所述.