html - 如何在 HTML 中对齐输入表单

Question

我是 HTML 新手，正在尝试学习如何使用表单。

到目前为止，我遇到的最大问题是对齐表格。这是我当前 HTML 文件的示例:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

问题是，“电子邮件”之后的字段框与名字和姓氏相比在间距方面有很大不同。使它们基本上“排列”的“正确”方法是什么？

我正在尝试练习良好的形式和语法...我不确定很多人可能会使用 CSS 来做到这一点，到目前为止我只学习了 HTML 的基础知识。

Answer 1

接受的答案(以像素为单位设置明确的宽度)使更改变得困难，并且当您的用户使用不同的字体大小时会中断。另一方面，使用 CSS 表格效果很好:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

这是一个 JSFiddle:http://jsfiddle.net/DaS39/1/

如果您需要标签右对齐，只需将 text-align: right 添加到标签中:http://jsfiddle.net/DaS39/

---

编辑:另一个快速说明:CSS 表格还可以让您玩转列:例如，如果您想让输入字段占用尽可能多的空间，您可以在表单中添加以下内容

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

在这种情况下，您可能希望将 white-space: nowrap 添加到 labels。