排列文本字段答案

【问题标题】：Lining up text fields排列文本字段
【发布时间】：2010-10-27 15:07:10
【问题描述】：

如何排列文本字段以使它们看起来更整洁？目前我有：

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

【问题讨论】：

标签： html ruby-on-rails css

【解决方案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>

【讨论】：

哦，尝试使用相对宽度...例如 10em，以便缩放。我倾向于将我的表单放入带有图例的字段集中。然后我使用一个有序列表并将每个“行”作为一个列表项放入......使得清除浮动更容易。

【解决方案2】：

对于您的问题：为标签元素设置宽度。在单独的说明中，我会在外部样式表中进行样式设置，并使用以下语法作为表单，只是个人喜好问题。当然它有点冗长，但更容易为 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>

【讨论】：