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