Rendi il bordo inferiore più vicino al testo

Question

Voglio sottolineare il mio menu di navigazione, ma il problema è che ho bisogno che sia più spesso, quindi sto usando il bordo inferiore invece che posso impostare la larghezza a 6px.

Mi sembra di capire come far apparire il bordo più vicino al testo. Sembra che ci sia un gap di 10px tra il testo e il bordo inferiore al momento e non voglio averne.

Ho provato a posizionare un altro div e posizionarlo rispetto a ciascuno {li} con {bottom: 10px} ma non riesco a farlo funzionare.

Ecco quello che ho così

CODICE

<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

È possibile utilizzare una miscela di line-height e margin a raccogliere un tale effetto, in questo modo:

#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

Prova ad aggiungere questo:

padding-bottom: 5px; 

a

#menu ul li a{ 

Answer 3

Prova a this (origine russa http://artgorbunov.ru/bb/soviet/20120510/) metodi articolo (sfondo sfumato e 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

ha avuto un problema simile alla domanda originale. La risposta è stata qui: https://stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text

La soluzione di cui sopra potrebbe aiutare gli altri che non sono riusciti a ottenere la soluzione a questa domanda per loro.

Answer 5

L'utilizzo di display: inline-block; in combinazione con border-bottom potrebbe causare alcune interruzioni di linea di comportamento strani se i collegamenti più lunghi contengono un'interruzione di linea, vedere http://jsfiddle.net/PQZ9H/. In alternativa, è possibile utilizzare una combinazione di background-image e background-position che presenta il vantaggio di non toccare il valore visualizzato.

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

Uno svantaggio è che potrebbe essere necessario definire un background-position per ogni font-size che si usa.

Utilizzando questa tecnica si potrebbe anche rimuovere il bordo da discendenti come il go y aggiungendo

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

e

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

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

Answer 6

proprietà Margin non può cambiare il border- posizione in basso, quindi

L'altezza dell'elemento <a> definirà la posizione del bordo inferiore.

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