我们将如何使用CSS而不是HTML表格来实现这种基于表格的布局？
我希望以下布局出现在屏幕上：
FieldName 1 [Field input 1]
FieldName 2 is longer [Field input 2]
. .
. .
FieldName N [Field input N]
要求：
- 字段名称和字段输入必须在左侧对齐
- 两列都必须根据其内容动态调整大小
- 必须跨浏览器工作
我发现使用HTML表进行此布局非常简单，但是由于我看到许多CSS纯粹主义者坚持认为表仅用于表格数据，所以我认为我会找出是否有使用CSS的方法。
解决方案
FieldName对象应包含在样式中为float：left且宽度足以容纳标签的SPAN中。
输入应包含在跨度为float：left的范围内。在每个字段输入之后放置一个<div style =" clear：both" />或者<br/>`以打破浮动。
我们可以将上述对象括入div中，该div的width样式属性集对于标签和输入都足够宽，以使"表"保持较小并包含在内。
例子：
<span style="float: left; width: 200px">FieldName1</span><span style="float: left"><input/><br/> <span style="float: left; width: 200px">FieldName2</span><span style="float: left"><input/><br/> <span style="float: left">FieldName3</span><span style="float: left"><input/><br/>
每行都应视为一个" div"，其中包含两个" span"，一个用于字段名，一个用于输入。在两个跨度上都设置" float：left"。但是，我们需要为"字段名"跨度设置一些宽度。
另外，为div设置样式，使其包括属性" clear：both"以防万一。
最好还是使用列表
<fieldset class="classname">
<ul>
<li>
<label>Title:</label>
<input type="text" name="title" value="" />
</li>
</ul>
</fieldset>
设置li标签的宽度，使其宽度足以容纳标签和输入，并将标签浮动到左侧。
同样，要实现与该表类似的表，我们可以将标签宽度设置为与强制所有标签或者扩展该宽度的最大字段名一样大。
[edit]这是一个很好的阅读清单
我不会，我会用桌子。这是表格布局的经典示例，正是这种布局应该用于事物表。
尽管可能是这样，但尚不清楚它是否像其他一些评论一样是表格数据。表将暗示相应列中所有项目之间的语义关系(不仅仅是"它们都是数据库列的所有名称")。无论如何，这是我之前做过的事情：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Form layout</title>
<style type="text/css">
fieldset {width: 60%; margin: 0 auto;}
div.row {clear: both;}
div.row label {float: left; width: 60%;}
div.row span {float: right; width: 35%;}
</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>Section one</legend>
<div class="row">
<label for="first-field">The first field</label>
<span><input type="text" id="first-field" size="15" /></span>
</div>
<div class="row">
<label for="second-field">The second field with a longer label</label>
<span><input type="text" id="second-field" size="10" /></span>
</div>
<div class="row">
<label for="third-field">The third field</label>
<span><input type="text" id="third-field" size="5" /></span>
</div>
<div class="row">
<input type="submit" value="Go" />
</div>
</fieldset>
</form>
</body>
</html>
编辑：似乎"按设计"我不能回复我对答案的评论，显然这在某种程度上减少了混乱。因此，在回答26条评论中的17条时，60％的宽度完全是可选的，默认情况下，字段集将继承包含元素的宽度。当然，如果只有IE支持它们，我们也可以使用min-width和max-width或者任何表布局规则，但这并不是CSS失败的原因；)
我认为大多数答案都没有提到原始提问者希望列的宽度取决于内容的宽度。我相信使用纯CSS做到这一点的唯一方法是使用" display：table"，" display：table-row"和" display：table-cell"，但是IE不支持。但是我不确定是否需要此属性，我发现创建宽列是因为存在单个长字段名称，这会使布局在美学上不那么令人愉悦并且更难使用。在我看来，包装线是可以的，所以我认为我刚才提出的答案是错误的，可能是解决方法。
Robertc的例子很理想，但是如果我们真的必须使用表，我想我们可以通过对字段名使用<th>使其更"语义化"。我对此不太确定，如果我错了，请有人纠正我。
<table>
<tr><th scope="row"><label for="field1">FieldName 1</label></th>
<td><input id="field1" name="field1"></td></tr>
<tr><th scope="row"><label for="field2">FieldName 2 is longer</label></th>
<td><input id="field2" name="field2"></td></tr>
<!-- ....... -->
</table>
更新：我没有密切关注此事，但是IE8显然支持CSS表，因此有人建议我们应该开始使用它们。有一篇关于24种方式的文章，最后包含一个相关示例。
在这个问题的限制下，此标记和CSS可以大致实现我们所陈述的目标...
提案
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Form</title>
<style type="text/css">
#frm1 div {float: left;}
#frm1 div.go {clear: both; }
#frm1 label, #frm1 input { float: left; clear: left; }
</style>
</head>
<body>
<form id="frm1" action="#" method="post">
<fieldset>
<legend>Section One</legend>
<div>
<label for="field1">Name</label>
<label for="field2">Address, City, State, Zip</label>
<label for="field3">Country</label>
</div>
<div>
<input type="text" id="field1" size="15" />
<input type="text" id="field2" size="20" />
<input type="text" id="field3" size="10" />
</div>
<div class="go">
<input type="submit" value="Go" />
</div>
</fieldset>
</form>
</body>
</html>
优点
...但是我不建议我们使用它。该解决方案的问题是
- 浏览器宽度很窄的非常烦人的整列包装
- 它将标签与其在标记中的相关输入字段分开
上面的解决方案应该是(我尚未验证)易于访问的，因为我阅读的屏幕阅读器在将标签关联到输入字段时使用for =""属性做得很好。因此，这在视觉上和可访问性方面都行得通，但是我们可能不希望将所有标签与输入字段分开列出。
结论
提出的问题-特别是要求将不同长度标签的整个列的宽度自动调整为最大标签长度的要求-使标记解决方案偏向表。缺少该要求，存在许多表示形式的语义解决方案，正如该线程中的其他人所提到和建议的那样。
我的意思是：有多种方式可以令人满意，可访问且直观的方式呈现表单并收集用户输入。如果找不到可以满足最低要求的CSS布局，但是表格可以，请使用表格。
