html5标头标签，导航标签中的锚标签是异常/不需要的高度

Question

我一直在尝试使用html5标记格式化新的网页标题/导航栏。我很难让我的CSS正确地格式化。使用div和表我能够产生以下内容：

我想在不使用div或表的情况下生成上面的图像，以下是我的尝试无效的摘要。我相信我对display:table-cell的理解遗漏了一些东西。

更改为下面的html并使用以下css属性display:table，display:table-row，display:table-cell等。导致一个不受欢迎的锚高度 - 我用一些开发工具戳了一下，我相当确定锚高度是问题。 （完整的CSS位于此JsFiddle）：

<header>
<nav>
    <img class="logo" src="img.png"/>
    <a href=""><h1>Home</h1></a>
    <a href=""><h1>Blog</h1></a>
    <a href=""><h1>About</h1></a>
    <a href=""><h1>Contact</h1></a>
</nav>
</header>

尝试设置锚点和标题标记max-height:100px不起作用（以及少数其他尝试），它一直计算到~130px。

请参阅JsFiddle了解相关代码。

Answer 1

用我的CSS替换你的CSS

nav h1{
    color:lightgray;
    font-size: 150%;
    border-left:2px solid whitesmoke;
    padding:0px;
    min-width:50px;
    padding-right:30px;
}
nav a{
   float:left;
    width:20%;
    max-height:100px;
}
nav a h1:hover{
    color:lime;
}
nav{
    height:100px;
    background-color:#000000;
    box-shadow: 0px 0px 10px #000000;

}
header{
    background-color:black;
    background-position:-50px 0px;
    float:left;
    width:100%;
    max-height:100px;
}
header img.logo{
    background-size:contain;
    background-repeat:no-repeat;
    width:430px;
    float:left;
}

键是添加float:left而不是使用display:table,display:table-row,display:table-cell

Answer 2

额外的30px来自h1标签上的15px填充，因为填充不包含在最大高度

Answer 3

替代解决方案

并使用display:table，display:table-row，display:table-cell

进行解释

或者，我想出了造成模糊高度的原因。使用table，tr和td标记时，表格单元格（td）的最大高度从未被覆盖。

当我将标记更改为header时，nav元素定义了锚标记，即使它认为display:table-cell和max-height:100px仍然允许覆盖高度，它的内部内容是h1标签。 h1的边缘导致锚标签的高度高于期望值。我通过设置h1标记的margin:0px解决了这个问题。

使用float会导致锚标记在徽标下方重新渲染。我希望它能在同一条线上保持规模。我没有说明这是我的问题，所以我选择了之前选择的答案。

This fiddle显示我可以扩大/缩小页面并保持导航元素的缩放和相应的展开。