1

私は次のレイアウトを持っています: fiddle。

<div>
<div class="left">
    <div>label not aligned</div>
</div>
<div class="right">
    <div><textarea></textarea></div>
</div>
</div>
<div>
<div class="left">
    <div>label aligned</div>
</div>
<div class="right">
    <div><input></input></div>
</div>
</div>
/*...css in the fiddle*/

2 行あり、1 行にはテキストエリアがあり、もう 1 行には比較用の入力があります。ご覧のとおり、行の高さと高さが右の列と同じであっても、最初の行のラベルが押し下げられています。入力の 2 行目では、ラベルが基本的に中央に配置され、右側の入力と一直線になっている、私が期待していた動作を確認できます。これは、テキストエリアのサイズが変更されていない場合でも発生します。

なぜこれが起こっているのか誰にも分かりますか？float left を使用して動作させる方法は知っていますが、よりクリーンなソリューションがあるかどうかを知りたいと思っていました。前もって感謝します。

4

1 に答える 1

5

以下のようにクラスに a を追加vertical-align: topします。.left

.left{
    border: 1px solid black;
    vertical-align: top;
}

更新されたフィドル

于 2013-09-30T15:26:34.093 に答える