我知道已经有很多关于使用 CSS 与表格的表单布局的问题。总的来说，我认为 CSS 是可行的方法，但我见过的所有 CSS 解决方案都存在“硬编码”标签和/或输入字段宽度的缺点。
结果是需要为每个表单添加一个或两个自定义规则，假设每种情况下标签的最大宽度不同。
有没有一种方法可以设置表单样式，这样无论标签有多长，它都会自动排列标签和输入？
【问题讨论】：
<table> 没有任何问题。
在页眉中嵌入特定页面的规则没有任何问题，而不是为所有内容使用不同的文件。
如果您的表单与您所说的完全不同，那么除了为每个表单制定自定义规则之外别无他法......
您是否想将所有表单样式放在一个大文件中，或者只在页眉中包含相关的样式，取决于您的用户在平均访问时将访问多少个表单。每次访问几张表格；把它们放在标题中。每次平均访问的表格很多；将它们全部放在一个单独的文件中，以便用户缓存。
【讨论】：
查看此 URL 左侧的表单 http://www.blueprintcss.org/tests/parts/forms.html
如果您将标签放在 1 行，输入框放在另一行，那么您不必担心标签的对齐方式。样式多一点，你就会有一个干净漂亮的 web2.0 形式
干杯
【讨论】：
在输入上方或附近放置标签的主题是一个单独的讨论（我建议阅读 Luke Wroblewski 关于该主题的书：http://www.lukew.com/resources/articles/web_forms.html）
样式化 Web 表单非常简单。首先，您要确保以语义适当的方式标记表单。这是您现在使用 CSS 进行布局而不是表格的主要优势之一。有关这方面的更多信息，请参阅关于该主题的优秀 List Apart 文章：http://www.alistapart.com/articles/prettyaccessibleforms/
现在在上述文章中，作者使用了一个名为 inline-block 的显示属性。这是实现效果的一种相当简单的方法。只需申请：
label {
display: inline-block;
width: 120px; /* Specify the width that works for your design */
}
并且您的标签将具有固定长度，并且输入与它们相邻。但是，如果您不指定宽度而只使用：
label, input {
display: inline-block;
}
然后，您的标签和输入将按照您所说的“自动”内联排列。这里的问题不是技术问题，而是设计问题。如果您输入的内容不垂直排列，那么用户填写表单会更加困难。这是您应该记住的另一个考虑因素，因为以这种方式定位标签和输入比适应固定宽度更容易。
另一个问题是 inline-block 在某些浏览器中不能正常工作。 Inline-block 在旧版本的 Firefox 或 IE 中不可靠。所以我倾向于使用另一种方法。假设您使用列表以语义适当的方式标记表单。那么在这种情况下，你可以有类似的东西：
<form>
<fieldset>
<legend>Health information:</legend>
<ul>
<li><label>Height</label> <input type="text" size="3" /></li>
<li><label>Weight</label> <input type="text" size="3" /></li>
</ul>
</fieldset>
</form>
在这种情况下，我们可以使用固定宽度和绝对定位来相邻排列我们的元素：
form li {
display: block;
padding: 2px;
position: relative;
}
/* The top and left position of 2px simulate
padding since we are using absolute positioning. */
form label {
display: block;
left: 2px;
position: absolute;
top: 2px;
width: 120px;
}
form input {
display: block;
margin-left: 125px;
}
标签相对于列表项定位，输入被推到左边距的一侧。但是这种方法有一个问题。此方法仅适用于硬编码宽度。更重要的是，多行标签无法正确清除。所以在这种情况下，我们可以采取类似的方法，但使用浮动和溢出。所以我们可以在我之前展示的同一个 html 标记上使用这个替代 CSS：
form li {
display: block;
overflow: hidden; /* This clears the floating element. */
padding: 2px;
}
form label {
display: block;
float: left;
padding-right: 5px;
}
form input {
display: block;
}
现在使用此方法，标签浮动到输入的左侧。如果您不指定宽度，则标签将与其中的内容一样宽（直到 HTML 文档中它的父节点的宽度）。通过在父对象上将溢出设置为隐藏，无需清除元素。此技术适用于硬编码宽度或继承的默认宽度：自动。
最后但并非最不重要的一点是，如果您想使用最有效的表单方法（输入顶部的标签），这已被证明是用户可以最快完成的表单样式，是您唯一需要的 CSS完成这个是：
label, input {
display: block;
}
另一个注意事项 - 像这样标记 HTML 时，您可能想知道所有这些列表元素会创建项目符号等。您应该选择在文档中包含 CSS 重置以确保浏览器之间的一致性。我推荐 Eric Meyer 的：
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
【讨论】：
个人意见：用一张桌子。
每次你写类似的东西
label {
width: 150px; /* or whatever width */
}
那么你是在混合内容和表示，因为只有知道标签将包含什么才能计算标签的值，这违背了语义 CSS 纯粹主义者的原则。
【讨论】：
您可以通过浮动标签并将它们放置在浮动块元素中来处理此问题，对于输入字段也是如此。这将创建一个基于内容自动调整大小的两列布局。这是 HTML：
<form>
<div id='labels'>
<div>Name: </div>
<div>Street:</div>
<div>This is a longer than usual label:</div>
<div>City:</div>
</div>
<div id='inputs'>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
</div>
</form>
以下是 CSS 规则：
#labels {
float: left;
}
#labels div {
clear: left;
float: left;
}
#inputs {
float: left;
}
#inputs div {
clear: left;
float: left;
}
#labels div, #inputs div {
height: 30px;
}
编辑：如果要在标签和输入之间创建语义连接，可以正式将每个标签标记为 html 标签，然后使用 for 和 id 属性链接它们。例如，这是一个标签定义：
<div><label for='name'>Name: </div>
这里是对应的输入框：
<div><input id='name' type="text"></div>
【讨论】：