所以我有这个问题,我的Navbar根据指定的填充分割自己。更容易看到我的意思。
正如您所看到的,我有一个额外的空白菜单项,经过一段时间我可以缩小到由填充引起的。
上面是0填充。如何保持导航栏高度以及修复菜单?
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
具体地:
填充:20px; (image1)填充:0px; (图片2)
段
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}

<nav>
<ul id="menu">
<li class="active"><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="art.html">ART</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
&#13;
答案 0 :(得分:1)
想成为你的问题? (我的假设) 首先检查 CODEPEN
您将padding
属性分配给li a:hover
,而不是li a
。
通过向li a
添加填充可以实现所需的结果,而其他方式是将line-height
分配给li
/ #menu
。
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
&#13;
<nav>
<ul id="menu">
<li class="active"><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="art.html">ART</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
&#13;