排列文本字段

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

在列表除了是關於如何做一個美麗的文章，擁有各類保障老年人的browers

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

Answer 3

對於你的問題：設置一個寬度與標籤元素。在另一個筆記中，我會在外部樣式表中使用以下語法來創建表單，只是一個口味問題。確定它有點冗長，但更容易風格imo。

<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>