css - html5 标题标签，导航标签中的 anchor 标签不寻常/不需要的高度

Question

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

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

更改为下面的 html 并使用以下 css 属性 display:table,display:table-row,display:table-cell等。导致不希望的 anchor 高度 - 我用一些开发工具四处寻找，我相当确定 anchor 高度是问题所在。 (完整的 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>

尝试设置 anchor 和标题标签 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