使文本输入字段及其标签正确排列答案

【问题标题】：Make text input fields and their labels line up correctly使文本输入字段及其标签正确排列
【发布时间】：2009-08-09 22:24:23
【问题描述】：

这是一个相当标准的 Rails 表单的摘录：

  <p>
    <%= f.label :from_station %> <%= f.text_field :from_station %>
  </p>
  <p>
    <%= f.label :to_station %> <%= f.text_field :to_station %>
  </p>

默认情况下，呈现如下：

alt text http://img412.imageshack.us/img412/127/picture6u.png

这看起来不太好，因为文本字段没有对齐。使表单看起来更像这样的最简单方法是什么：

alt text http://img193.imageshack.us/img193/746/picture7shk.png

我尝试在<label>s 上设置width 样式属性，但该属性似乎没有任何作用。

【问题讨论】：

我发现没有将每个字段放在自己的行上，即从和到水平相邻。

标签： ruby-on-rails css

【解决方案1】：

我认为这更像是一个 CSS 问题；

标签默认不是块级元素，因此不接受宽度。尝试设置这个 CSS：

label{
  width: 4em;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block
}

希望有帮助！

【讨论】：

我想知道这个解决方案是否适用于旧版浏览器（例如 IE6，仅举一个例子）。我觉得table方案更靠谱……
是的，它会，并且对于屏幕阅读器和纯文本浏览器也更有效。和搜索引擎:)
@Jongsam：如果您在 SO 上寻找无数问题和答案，讨论布局中表格的错误和正确用法，您很可能会得出结论，您不应该为此使用表格。

【解决方案2】：

您可以使用<table>，其中每个标签位于第 1 列，每个文本字段位于第 2 列。

【讨论】：