HTML5标题不会随导航菜单调整大小

Question

我有这个标题：

<header>
    header 
    <br />
    <nav>
        <a href="index/" class="activeNav">Home</a>
        <a href="index/help/">Help</a>
        <a href="login/">Login</a>
    </nav>
</header>

用这个css：

header {
    padding: 20px 20px 0px 20px;
    background: gold;
}

header nav{
    list-style-type: none;
    margin-top: 10px;
    padding: 0;
}

header nav>a{
    background-color: black;
    margin-right: 10px;
    color: red;
    text-decoration: none;
    padding: 5px
}

header nav>a.activeNav{
    background-color: white;
}

但nav元素的底部与header元素的底部不对齐。目前，它看起来像这样：

我知道它看起来很糟糕，但那是因为我想先解决这个问题。那么，有没有人知道如何解决这个问题？

Answer 1

您可以将display: inline-block应用于header nav > a元素。

JSFiddle

或者您可以将overflow: hidden应用于header元素（如果您希望nav通过削减内部元素来适应header） 。

JSFiddle

Answer 2

这些解决方案可行，但它们无法解释为何会出现此问题。

默认情况下，锚点是内联元素，它们的背景可以延伸到父项之外，而不会强制父级容纳它们的高度。

一个更优雅的解决方案，不涉及摆弄像素，如果你实现一个响应式设计，这可能很麻烦，是将锚点指定为块级元素并将它们向左浮动：

header nav>a{
    float:left;
    display:block;
}

然而，现在它们是浮动的，你需要确保标题将“清除”它们 - 换句话说，扩展它的高度以容纳它们。这样就可以了：

header:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

JSFiddle

Answer 3

您可以通过向padding元素的底部header添加5个像素来解决此问题。

Answer 4

需要在padding的底部添加5个像素作为header。  喜欢如此：

header {
  padding: 20px 20px 0px 20px;
  background: gold;
  padding-bottom:5px;
}

JSFiddle（为可见性添加了背景）

Answer 5

是的，通过添加overflow:hidden来修复。您可以在网上阅读有关此问题的信息。它叫做“haslayout”。阅读此内容以避免将来出现这种错误。

Answer 6

这是因为您将padding设置为所有方向，但是将其更改为：

header {
    padding: 20px;
    background: gold;
}

或者您可以使用overflow:hidden

header {
    padding: 20px 20px 0px 20px;
    background: gold;
    overflow:hidden;
}