1

フォーム要素を 3 つの別々の列に配置するという要件があります。ラベルにはさまざまな量のテキストを含めることができ、フォーム要素は主に入力ボックスとテキストエリアになります。

設計者は、入力要素が垂直方向に正しく配置されるようにしたいと考えています。アプリがローカライズされている場合、特定のパディング/マージンは柔軟に使用できないため、使用できません。

下の画像をご覧ください。最初の行は現在発生している問題を示し、2 番目の行はどのようにレイアウトしたいかを示しています。私たちが考えた唯一の解決策は、ラベルを実際のフォーム要素とは別の行に配置することです。これがアクセシビリティに適しているとは思えません。

どんなヒントでも本当に感謝しています。

ここに画像の説明を入力

これまでのコードのフィドルです - http://jsfiddle.net/nJZ6Y/4/

<div class="grid_4"> <div class="contents"> <label>TR 1 TD 1</label> <input type="text" /> </div> </div> <div class="grid_4"> <div class="contents"> <label>Bonorum Fermentum Tortor Adipiscing Pharetra</label>

4

2 に答える 2

1

これがフィドルです：http://jsfiddle.net/nJZ6Y/19/

spaneach の中に a を追加してから、labelこれらの CSS ルールを追加する必要があります。

label {
    min-height: 3em;
}

label span {
    vertical-align: -3em;
    display: inline-block;
}
于 2013-09-25T13:38:35.850 に答える