添加保證金會導致姐妹元素具有相同的保證金

Question

我已經制作了此中心導航欄，並且我想通過使其看起來像被按下來添加:active狀態，因此我在a元素上添加了margin-top:2px。

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

---

的問題是，爲什麼其他a元素也有即使我只是它分配給當前被點擊的元素的邊距？

---

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

你沒有真正將邊緣到所有a元素，而這是方法inline-block的元素行爲也給他們的行高，垂直排列等等。

您正在渲染li元素內聯。畫出一條穿過它們的基線 - 現在，當你最終推動其中一個節點的子節點向下推動2px時，它不能不能打擾亂這個基線，所以它最終以統一的方式推動這個基線，從視覺上拖垮其餘的按鈕。

我建議避免inline-block不平凡的使用，直到您熟悉它的渲染細節 - 嘗試，例如，floating或使用position:relative