2

:activeこの中央のナビゲーション バーを作成し、リンクが押されたように見せることでリンクに状態を追加したかったのでmargin-top:2px、a要素に 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現在クリックされている要素にのみ割り当てた場合でも、他の要素にもマージントップがあるのはなぜですか?

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要素をインラインでレンダリングしています。それらを通過するベースラインを想像してみてください。ノードの 1 つの子を 2 ピクセル下に押した場合、このベースラインを乱すことはできないため、このベースラインを一様に押して、残りのボタンを視覚的に押し下げます。

レンダリングの詳細に慣れるまで、自明ではない の使用を避けることをお勧めinline-blockします。たとえば、フローティングまたはposition:relativeの使用を試してください。

于 2012-04-06T07:42:42.817 に答える