使底部边框更接近文本

Question

我想强调我的导航菜单,但问题是我需要它更厚,所以我使用底部边框,以便我可以将宽度设置为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{
}

Answer 1

你可以混合使用line-height和margin获得这样的效果,如下所示:

#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;
}

Answer 2

使用display: inline-block;结合border-bottom可能会导致一些奇怪的行为,换行,如果再链接包含断行,见http://jsfiddle.net/PQZ9H/.或者,您可以使用组合,background-image并且background-position具有不触及显示值的优点.

a {
    text-decoration: none;
    position: relative;
    background-repeat: repeat-x;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
    background-position: left 15px;
}
a:hover { background: none; }

缺点是您可能必须为您使用的每个字体大小定义背景位置.

使用这种技术,你也可以从g或y添加的下降器中删除边框

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }

和

<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a>

见http://jsfiddle.net/25XNY/1