尝试开发仅带有链接的无名单导航栏或无精打采的导航栏。我正在使用Nav标签和一堆链接，但似乎无法使用“ a”标签中提供的填充来正确地（高度）扩展“ nav”标签。
nav{
background-color:midnightblue;
width:100%;
}
nav > a:link {
padding:5px;
font-size:.8em;
border-top:1px solid rgb(255, 255, 255);
border-left:1px solid rgb(255, 255, 255);
border-right:1px solid rgb(255, 255, 255);
text-decoration: none;
color:white;
background-color:rgb(119, 119, 172);
margin-right:.5em;
transition: background-color 0.3s ease;
}<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</nav>最简单的方法是将以下行添加到css：中nav { display: flex; flex-direction: row; }。
display: flex;将导航栏设置为flex容器。flex-direction: row;将确保该元素像普通块元素一样放置在一行中，而不是一列中。
编辑：正如注释中正确指出的那样，这是默认行为，可以省略。
nav{
background-color:midnightblue;
width:100%;
display: flex;
flex-direction: row;
}
nav > a:link {
padding:5px;
font-size:.8em;
border-top:1px solid rgb(255, 255, 255);
border-left:1px solid rgb(255, 255, 255);
border-right:1px solid rgb(255, 255, 255);
text-decoration: none;
color:white;
background-color:rgb(119, 119, 172);
margin-right:.5em;
transition: background-color 0.3s ease;
}<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</nav>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句