使底部邊框更接近文本

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