html - フォーム内のCSSポジショニングヘルプテキスト

Question

ラベルの下にヘルプテキストを配置し、CSSを正しく取得するのが難しいと感じる必要があります。

例として、以下のjsfiddleを作成しました。

要件は次のとおりです。

1. ラベルは左揃えです
2. ヘルプテキストはそのすぐ下に表示されます
3. 入力コントロールと選択コントロールは同じ行に表示されます

http://jsfiddle.net/brendan_rice/paSR2/2/

誰か助けてもらえますか？

Answer 1

私はあなたのデザインにいくつかの変更を加えました：

http://jsfiddle.net/paSR2/13/

これはあなたが求めているものですか？

Answer 2

コードとcssを少し再調整しました。こちらをご覧ください：

http://jsfiddle.net/paSR2/9/

Answer 3

チェックしてください、

http://jsfiddle.net/paSR2/4/

変更点

label {
display: block;
font-size: .9em;
float: left;
clear: left;
width: 52px; <----- /*changed*/
margin: 0px;
padding: 0px
}

ハードコードされた幅なし

label {
display: block;
font-size: .9em;
float: left;
clear: left;
margin: 0px;
padding-right: 5px;
}