使底部边框更接近文本

Question

我想强调我的导航菜单，但问题是我需要它更厚，所以我使用底部边框，以便我可以将宽度设置为6px。

我似乎弄清楚如何让边框看起来更接近文本。文本和底部边界之间似乎有大约10px的差距，我不想拥有任何内容。

我试图定位另一个div，并将它定位为{{}}的每个{li}，但似乎无法使其工作。

这里就是我有这么

CODE

<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

尝试添加此：

padding-bottom: 5px; 

到

#menu ul li a{ 

Answer 3

尝试this（原点俄语http://artgorbunov.ru/bb/soviet/20120510/）制品的方法（背景梯度和http://jsfiddle.net/d3WG6/）

<p>Зигварт считал <a><span>критерием истинности необходимость и&nbsp;общезначимость, для&nbsp;которых нет никакой опоры</span></a> в&nbsp;объективном мире.</p> 

a { font-size: 50%; border-bottom: 1px dashed red; } 
a > span { font-size: 200%; line-height: normal; } 

Answer 4

与原始问题有类似的问题。 已在这里回答：https://stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text

上面的解决方案可能会帮助其他人无法解决此问题的解决方案。

Answer 5

如果较长的链接包含换行符，请参阅http://jsfiddle.net/PQZ9H/，如果将display: inline-block;与border-bottom结合使用，可能会导致一些奇怪的行为换行符。或者，您可以使用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

Answer 6

Margin属性不能改变border-底位，所以

<a>元素的高度将定义您的border-bottom的位置。

#menu > ul > li > a { 
     height: ; 
}