Ändern Sie die Schriftgröße bei Hover verschieben andere divs

Question

Ich wollte Schriftgröße bei Hover auf Elementen ändern, die Prolem Ich habe festgestellt, dass, wenn ich auf ein Element bewegen die anderen divs der Liste nach unten bewegen. Dies ist mein Code:

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> 

und dies ist ein JSFiddle.

Wie Sie sehen können, habe ich Position geschrieben: absolut für das Element, das funktioniert, was bedeutet, dass die divs still bleiben, aber ich kann nicht herausfinden, wie ich meinen Text zentriere, wenn ich das tue. Ich vermutete, das Problem war, dass das Element keinen oberen Rand hatte, also habe ich das auch ausprobiert, aber ich denke, für Inline-Elemente ist es unmöglich, Ränder zu setzen, oder vielleicht tue ich jetzt einfach nicht den richtigen Weg.

Answer 1

Sie sollten eine line-height zu den äußersten Inline-Elemente (in Ihrem Beispiel, das die <li> ist) geben mindestens gleich die größte Größe der inneren Elemente (beim Schweben).

Zusätzlich sollten Sie auch vertical-align: middle den inneren Elementen (den Ankern) geben; ohne sie sind ihre unteren Kanten ausgerichtet, wodurch das störende Bild erzeugt wird.

Es ist kein position: absolute erforderlich.

See it in action.

Answer 2

ändern height:21px in line-height und verringern die line-height by 1px auf 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

Fügen Sie einfach float:left zu <li> hinzu und Sie werden überhaupt keine Probleme mit dem Umzug anderer div haben.

#menu_list li{ 

    float:left 

} 

Answer 4

Sie können auch position: relative zum li zuordnen und die a wie folgt ändern:

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

Es ist nicht die eleganteste Lösung möglich (die die line-height sein sollte), aber es funktioniert.