html5标头标记，导航标记中的锚标记异常/不期望的高度

debugcn 发表于 Dev

亚瑟·韦伯

我一直在尝试使用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。

阿迪亚·庞克（Aditya Ponkshe）

用我的替换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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。