对齐HTML输入

Question

我试图在一个表单中对齐多个输入并选择框。 香港专业教育学院尝试了各种CSS样式来尝试对齐它们，但一切似乎都失败了（??）。

我的html可以在这里找到。

http://jsfiddle.net/felix001/kA8cd/3/

有没有人知道任何简单的方法来对齐这些元素。

谢谢，

Answer 1

  

有没有人知道任何简单的方法来对齐这些元素。

是的，您可以使用Twitter Bootstrap：http://twitter.github.com/bootstrap/

它为常见的HTML元素（包括表单）提供了出色的，写得很好的样式。使用它们作为起点并从那里扩展。

Answer 2

他们曾经说不使用表格来布置非表格数据，但在这种情况下，如果你想要一个快速而肮脏的解决方案，它就可以了。 （并不是说我正在考虑使用表格进行布局;只是把它放在那里是一个选项应该都会失败。）

Answer 3

如果你想在左边对齐标签，在右边输入，你可以试试这个：

  

标签{       明确：两者;       向左飘浮;       最小高度：35px; }   输入，选择{       漂浮：对; }

这不是最好的解决方案，但如果您正在寻找简单，快速和简单的方法，它应该可行。您可能希望将所有内容都包装在div中并在该包装器上设置宽度，以便字段和标签也更加靠近。

Answer 4

我喜欢使用列表来排列我的表单。我不能说这种方法是否仍然被广泛采用，但它对我很有帮助。我和你的fiddle玩了一下，给你一个如何用列表布置表单的例子，但是我没有为你完全设计你的例子：）

另一个列表示例http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html

列表允许我使用漂亮的块。就像@Roddy所说的那样，表格会起作用，但更好的选择可能是将div设置为像display: table-cell这样的属性的表格。

你也可以使用像这个人http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx

这样的花车

我认为所有这些方法都非常有效。如果您需要更具体的答案，请提供您希望如何调整表单的详细信息。