Question

我已经设置了这个居中的导航栏，我希望通过使其看起来像是按下来为链接添加: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/

Answer 1

您实际上并没有为所有a元素添加边距，而是这是内联块元素在行高，垂直对齐等情况下的行为方式。

您正在内联呈现li个元素。想象一下通过它们的基线 - 现在，当你最终将其中一个节点的子节点向下推2px时，它不能打扰这个基线，所以它最终以统一的方式推动这个基线，从视觉上降低其余的按钮。

我建议在您熟悉其呈现细节之前避免使用inline-block，例如，尝试使用floating或使用position:relative

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

1 个答案: