Hinzufügen Marge verursacht Schwester-Elemente die gleiche Marge haben

Question

ich diese zentriert Navigationsleiste gemacht haben, und ich wollte, indem es einen :active Zustand in den Link hinzuzufügen, schauen, wie es gedrückt ist, so habe ich eine margin-top:2px auf dem a Element.

<ul> 
    <li>Previous</li> 
    <li>1</li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li>...</li> 
    <li><a href="#">Next</a></li> 
</ul> 

---

Das Problem ist, warum sind die anderen a Elemente haben auch eine margin-top, auch wenn ich es nur mit dem Element zugewiesen, die derzeit angeklickt wird?

---

ul { 
    text-align:center; 
} 
li { 
    color:#555+60; 
    display:inline; 
    font-size:18px; 
    padding:0 4px; 
} 
li:first-child,li:last-child { 
    border:1px solid #bbb; 
} 
a { 
    display:inline-block; 
    color:#555; 
} 
a:active { 
    margin-top:2px; 
}​ 

JSFiddle:http://jsfiddle.net/Pxmp3/

Answer 1

Du eigentlich keinen Spielraum für alle a Elemente hinzuzufügen, vielmehr ist dies der Weg, Inline-Block-Elemente ihren line-height, vertikale Ausrichtung gegeben verhalten usw.

Sie rendern li Elemente inline. Stellen Sie sich eine Grundlinie vor, die durch sie geht - jetzt, wenn Sie ein Kind von einem der Knoten 2px drücken, kann nicht diese Grundlinie stören, so dass es am Ende diese Grundlinie in einer einheitlichen Art und Weise drückt, den Rest der Tasten optisch zu senken .

Ich würde vorschlagen, nicht-triviale Nutzung von inline-block zu vermeiden, bis Sie mit seinen Rendering Besonderheiten vertraut sind - versuchen, zum Beispiel, floating oder mit position:relative