2

2 つの「インライン ブロック」ボタンがあります。下の画像を参照してください。

通常のボタン

しかし、クリックすると、もう一方のボタンが 2 ピクセル下に表示されます。

ここに画像の説明を入力

例: http://jsfiddle.net/caio/EUjeY/ .

.button {
    border-radius: 2px;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ccc;
    background: #eee;
    padding: 5px 10px;
    display: inline-block;
}

.button:hover {
    background: #e7e7e7;
}

.button:active {
    border-bottom: 1px solid #ddd;
    padding: 7px 10px 5px;
}

これを防ぐのを手伝ってもらえますか？

ありがとう。

4

2 に答える 2

5

これを.buttonクラスに追加できます。

vertical-align: top;

実例： http： //jsfiddle.net/uW7Sa/1/

于 2012-10-31T22:00:08.730 に答える
0

.buttoncss プロパティを指定するだけfloat: leftで、両方のボタンが同じ場所に残ります。これはfloat: left、ドキュメントのフローからボタンを削除するためです。そのため、含まれている div は別として、他のインライン要素の影響を受けません。

.button {
    border-radius: 2px;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ccc;
    background: #eee;
    padding: 5px 10px;
    display: inline-block;
    float: left;
}

デモ

ここではフロートを使用しているため、さらにコードを提供しますが、ドキュメントの残りの部分がどのように見えるかがわからないため、補正できません。

于 2012-10-30T21:14:33.207 に答える