html - 使用 css 的 html 表单的列布局

Question

我需要创建水平表单，其中每个字段出现在其标签下，并形成基本的列格式，其中标签和字段出现在一列中。我尝试将它与表格格式一起使用，但它不适用于动态表单，在动态表单中我不知道表单中将出现的字段和标签的数量。

我搜索并找到了 HTML columns or rows for form layout?第一种方法给出了水平布局，但字段和标签在列格式中没有对齐。

.field-row {
 overflow: hidden;
}
.field-row span {
display: block;
width: 30%;
float: left;
}
.field-row .field-container {
 width: 70%;
 float: left;
}

<div class="field-row">
<span>Field 1</span>
<span>Field 2</span>
<span>Field 3</span>
<div class="field-container">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>

jsFiddle对于上面的代码。

是否有可能仅通过 div 或表格实现这一点？

[编辑] 抱歉，在原始问题中遗漏了这一点。

标签行周围需要有边框，以使其显示为单行。这就是我将所有标签保存在一个 div 中的原因，以便可以将此样式应用于 div。为预期的输出更新了 jsFiddle

http://jsfiddle.net/aBeF8/7/

Answer 1

好的，所以我添加了一个新的答案而不是修改现有的答案，因为您的要求已经更改或澄清:

• 您的 HTML 代码已生成，因此您无法修改它。
• 标签行周围需要一个边框。

请查看两者的答案: http://jsfiddle.net/aBeF8/13/

棘手的部分是您需要同时设置标签和输入的宽度，但默认情况下文本输入有一个 1px 的边框，它包含在宽度中。为了解决这个问题，我还为标签添加了隐藏边框。

.field-row span{
border:1px solid #fff;
}