整列しようとしているラベルとテキスト フィールドの例が 2 つあります (このフィドルで確認できます)。最初の例では、次のようなラベルとテキスト フィールドがあります。
<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />
2 番目の例では、次のように div にラベルと 3 つのフローティング テキスト フィールドがあります。
<div>
<div style="width:100px;float:left;background-color:red;">Date: </div>
<div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
</div>
上記のように、各ラベルの幅を 100px にしていますが、何らかの理由で、2 番目の例では、ラベルと最初のテキスト フィールドの間にスペースがありません。なぜこれが起こっているのか、なぜ私の幅100pxが私の2番目の例で何の効果もないように見えるのか知っていますか(上記のフィドルリンクを参照)。
ありがとうございました