CSSフォームの配置

挑戦する

入力フィールドが互いに下にあること、およびその位置が左側のフィールドヘッダーの最大長によって決定されることを確認します。 ソリューションでは、テーブルとJavaScriptを使用しないでください。

解決策

HTML-.



<div class="field">

   <label for="n"></label>

   <input type="text" id="n" />

</div>

<div class="field">

   <label for="ln"></label>

   <input type="text" id="ln" />

</div>

<div class="field">

   <label for="a"> </label>

   <input type="text" id="a" />

</div>















.



.field {clear:both; text-align:right;}















label «» .



.field {clear:both; text-align:right;}

label {float:left;}







, 100% .











, , :



<div class="main">

   <div class="field">

      <label for="n"></label>

      <input type="text" id="n" />

   </div>

   <div class="field">

      <label for="ln"></label>

      <input type="text" id="ln" />

   </div>

   <div class="field">

      <label for="a"> </label>

      <input type="text" id="a" />

   </div>

</div>







CSS :



.field {clear:both; text-align:right;}

label {float:left;}

.main {float:left}















, - float . Vertical-align, , , line-height.

:



.field {clear:both; text-align:right; line-height:25px;}

label {float:left; padding-right:10px;}

.main {float:left}











. piumosso ))