テキストフィールドの整列

Question

テキストフィールドを整列させるにはどうすればいいですか？現時点では、私は持っている：

<div id="content"> 
    <h2>Change password</h2> 
    <% form_tag({:action => "change_password"}, :method => "post") do %> 
    <%= @error %> 

    <div class="form_row"> 
     <label for="current_password">Current password:</label> 
     <%= password_field_tag 'current_password', "", :size => 15 %> 
    </div> 

    <div class="form_row"> 
     <label for="new_password">New password:</label> 
     <%= password_field_tag 'new_password', "", :size => 15 %> 
    </div> 

    <div class="form_row"> 
     <label for="repeat_new_password">Repeat new password:</label> 
     <%= password_field_tag 'repeat_new_password', "", :size => 15 %> 
    </div> 

    <%= submit_tag "Set new password", :class => "submit" %> 
    <% end %> 
</div> 

Answer 1

あなたはラベル要素に幅を入れます。別に一覧で

<form action=""> 
    <label style='float: left; display: block; width: 100px;'>Hello</label><input type="text" size="3"><br /> 
    <label style='float: left; display: block; width: 100px;'>Long World</label><input type="text" size="3"><br /> 
    <label style='float: left; display: block; width: 100px;'>How are you?</label><input type="text" size="3"><br /> 
</form> 

Answer 2

高齢たブラウザあなたの質問のために

http://www.alistapart.com/articles/prettyaccessibleforms

Answer 3

ためのセーフガードのすべての種類と、それを行う方法についての美品です：label要素に幅を設定します。別のノートでは、私は外部スタイルシートでスタイリングを行い、フォームのために次の構文を使用します。確かにもう少し冗長ですが、少し簡単にスタイルを変更できます。

<div id="#content"> 
    <h2>Change Password</h2> 
    <form> 
     <dl> 
      <dt> 
       <label for="elm">Test:</label> 
      </dt> 
      <dd> 
       <input type="text" id="elm" /> 
      </dd> 
     </dl> 
    </form> 
</div>