2

我已经制作了这个居中的导航栏，我想:active通过使它看起来像被按下来向链接添加一个状态，所以我margin-top:2px在a元素上添加了一个。

<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即使我只将其他元素分配给当前正在单击的元素，其他元素也有一个 margin-top？

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/

4

1 回答 1

2

您实际上并没有为所有a元素添加边距，而是考虑到它们的行高、垂直对齐等，这是内联块元素的行为方式。

您正在li内联渲染元素。想象一条穿过它们的基线 - 现在，当您最终将其中一个节点的子节点向下推 2px 时，它不会干扰该基线，因此它最终会以统一的方式推动该基线，从而在视觉上降低其余按钮。

我建议inline-block在您对它的渲染细节感到满意之前避免非平凡的使用 - 例如，尝试浮动或使用position:relative

于 2012-04-06T07:42:42.817 回答