添加保证金会导致姐妹元素具有相同的保证金

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