Cambia dimensione carattere al passaggio del mouse sposta altre div

Question

Volevo cambiare la dimensione dei caratteri al passaggio del mouse sugli elementi, il prolem che ho riscontrato è che quando passo a un oggetto le altre div della lista si spostano verso il basso. Questo è il mio codice:

CSS

a{ 
    /* position:absolute */ 
    font-size:16px; 
} 

a:hover { 
    color:#0033CC; 
    font-size:18px; 
} 

#menu_list{ 
    width:859px; 
    cursor:pointer; 
    } 

#menu_list li{ 
    width:130px; 
    height:21px; 
    display:inline-block; 
    margin: 0px 0px 0px 0px; 
    border:1px solid #616261; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font-family:sans-serif, arial, helvetica; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3); 
    font-weight:bold; 
    text-align: center; 
    } 

HTML

<ul id="menu_list"> 
    <li><a>look</a></li> 
    <li><a>look</a></li> 
    <li><a>look</a></li> 
    <li><a>look</a></li> 
    <li><a>look</a></li> 
</ul> 

e questo è un JSFiddle.

Come potete vedere ho scritto la posizione: assoluta per l'elemento, che funziona, nel senso che i div rimangono fermi, ma non riesco a capire come centrare il mio testo se lo faccio. Ho intuito che il problema era che l'elemento non aveva il margine superiore, quindi ho provato anche quello, ma credo che per l'elemento in linea sia impossibile impostare i margini, o forse non lo faccio ora nel modo giusto.

Answer 1

Si dovrebbe dare un line-height agli elementi in linea più esterni (nel tuo esempio che è la <li>) almeno pari a la dimensione maggiore saranno gli elementi interni (al passaggio del mouse).

Inoltre, è necessario fornire anche vertical-align: middle agli elementi interni (gli ancoraggi); senza di essa i loro bordi inferiori sono allineati, producendo la visuale stridente.

Non è necessario position: absolute.

See it in action.

Answer 2

Change height:21px in line-height e diminuire il line-height by 1px su hover

a:hover { 
    color:#0033CC; 
    font-size:18px; line-height:20px; 
    } 
#menu_list li{ 
    width:130px; 
    line-height:21px; 
    display:inline-block; 
    margin: 0px 0px 0px 0px; 
    border:1px solid #616261; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font-family:sans-serif, arial, helvetica; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3); 
    font-weight:bold; 
    text-align: center; 
    } 

DEMO

Answer 3

Basta aggiungere float:left allo <li> e non avrai alcun problema con lo spostamento di altri div.

#menu_list li{ 

    float:left 

} 

Answer 4

Si può anche assegnare position: relative al li e cambiare il a in questo modo:

a { 
    position:absolute; 
    font-size:16px; 
    display: block; 
    width: 130px; 
    left: 10px; 
} 

Non è la soluzione più elegante possibile (che dovrebbe essere il line-height uno), ma funziona.