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

这种现象确实有更优雅的解决方案。问题是没有帮助，父容器不会展开以包含浮动的子元素。另请参阅关于该主题的另一个answers。

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

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

或者您可以使用here所述的overflow: auto解决方案。

Answer 2

使用inline-block代替float-left;

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

Answer 3

<br style="clear: both;" />的一个很好的替代方法是将overflow: hidden添加到#nav。

Answer 4

点击此链接，了解所有浏览器中的最小高度：http://www.dustindiaz.com/min-height-fast-hack/

<nav style="display: block">
    <ul style="display: block;">
        <li style="display: inline-block; float: left">
            <a href=""> Link text</a>
        </li>
          <li style="display: inline-block; float: left">
            <a href=""> Link text</a>
        </li>  
    </ul>
</nav>

高度随内容扩大

4 个答案: