8

これは、私のコードが実際に動作していることを示すフィドルです

結果は私にはおかしいようです.Chromeでは、2番目のボタンが最初のボタンより少し上にあります. Firefox では少し下です。

<div id="accounts">
  <button class="account">
     <h1>VISA Card</h1>
     <span class="balance">-433.18</span>
  </button>
  <button class="account">
     <h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
     <span class="plus-text">Add Account</span>
  </button>
</div>

さらに紛らわしいのは、h1.plus のパディングがdiv 全体の位置に影響することです。

ここで何が起こっているのですか？2 つのボタンを同じ行に表示したいのですが、表示されない理由がわかりません。これはレンダリング エンジンのバグですか?

更新: Narendra は簡単な修正を提案しました - フロート: ボタンを残しました。そもそもなぜこのズレが起こったのかを突き止めたいと思います。

4

4 に答える 4

1

button.accountこれを:に追加しますvertical-align: middle;。

display: inline-block;また、プロパティは必要ないため、失う可能性があります。

于 2013-06-27T04:01:33.063 に答える
0

以下のコードを確認してください

button.account {
    display: block;
    float: left;
    height: 80px;
    margin: 10px 10px;
    padding: 10px 5px;
    width: 170px;
}
.account h1 {
    font-size: 16px;
    height: 16px;
    margin: 0 0 5px;
    padding: 4px 0 2px;
}
.account .balance {
    display: block;
    font-size: 24px;
}

.account h1.plus {
    font-size: 24px;
    padding-top: 0px;
}

ここにフィドルがあります http://jsfiddle.net/Gq3U8/13/

于 2013-06-27T03:38:07.723 に答える
-1

を使用している場合inline-block、主な関心事は空白についてです (要素の周囲にデフォルトのマージンが表示されます)。これを修正するvertical-align:topには、 を使用する代わりに を追加するだけfloat:leftです。要素を上に揃えます。

.account {
    display: inline-block;
    vertical-align: top;   /*add this one*/
    margin: 10px 10px;     /*remove this one then can see whitespace*/
}
于 2013-06-27T06:14:31.080 に答える