我想强调我的导航菜单,但问题是我需要它更厚,所以我正在使用底部边框,以便我可以将宽度设置为6px.
我似乎弄清楚如何让边界看起来更贴近文字.目前,文字和底边之间似乎有一个10px的差距,我不想有任何的.
我已经尝试定位另一个div,并将其定位到{li}({bottom：10px}),但我似乎无法让它工作.
这是我这样做的
码
<div id="menu">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
解决方法
您可以使用线高和边距的混合来获得这样的效果,如下所示：
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
