我必须创建一个看起来像这样的网络表单
列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列 标签：输入 - 标签：输入 标签：输入 - 标签：输入 - 标签：输入 标签：输入 - 标签：输入 标签：输入 标签：输入 - 标签：输入 标签：输入-标签：输入-标签：输入-输入：标签等等。
现在最好的方法是什么？ 我一直在尝试使用 css 完成的方法，但我一次又一次地失败了。
我应该继续使用表格，还是有一个简单的方法可以用 css 做到这一点？
【问题讨论】：
标签： css layout webforms xhtml html-table
只需使用表格即可。表格适用于表格数据，例如具有列和行的内容......就像您的情况一样！
【讨论】：
这样的事情怎么样？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.column {
width: 200px;
float: left;
}
.column label {
clear: both;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: right;
width: 75px;
}
.column input {
float: left;
width: 100px;
}
</style>
</head>
<body>
<div class="column">
<label>Label 1:</label> <input type="text" />
<label>Label 2:</label> <input type="text" />
<label>Label 3:</label> <input type="text" />
<label>Label 4:</label> <input type="text" />
</div>
<div class="column">
<label>Label 5:</label> <input type="text" />
<label>Label 6:</label> <input type="text" />
<label>Label 7:</label> <input type="text" />
<label>Label 8:</label> <input type="text" />
</div>
</body>
</html>
如果您喜欢这样，您可以考虑使用字段集而不是列的 div。他们的风格很好，更语义化。不过，无论哪种方式都很好。
【讨论】：
您的示例格式没有采用吗？如果您只想要一个标签、输入控件和一个空格，只需将控件添加到页面，无需任何格式。 HTML 会以这种方式布局。
但是，我假设您需要某种列。你有几种可能性。最不灵活的是绝对定位控件（标记）。
您可以使用表格，这是最直接的。但是，纯粹主义者会争辩说，表格是用于数据的，而不是用于布局的。
您还可以使用浮动一系列 DIV 来表示列：一列表示标签，一列表示输入，第三列表示标签，第四列表示输入，等等。
编辑：如果您不担心标签与标签垂直排列并且输入与输入垂直排列，只需在每列中放置一个标签 + 输入对，无论您选择哪种方法。
【讨论】：