使用 css 的 html 表单的列布局答案

【问题标题】：column layout for html form using css使用 css 的 html 表单的列布局
【发布时间】：2013-12-31 12:07:30
【问题描述】：

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

我搜索并找到 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 或 table 是唯一的方法？

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

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

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

【问题讨论】：

你想要这种类型jsfiddle.net/aBeF8/1???
不，这是垂直形式。我需要我的表单水平出现在标签下方的每个字段
请看这个jsfiddle.net/aBeF8/3 你必须在css中改变 .field-row .field-container { width: 30%;向左飘浮; }
布局看起来很完美，但我错过了一件有问题的事情。标签周围应该有边框，使它们显示为一行。这种结构可以做到吗？
是的，这是可能的。请看这个链接jsfiddle.net/aBeF8/5

标签： html forms css

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

你想要这样的东西吗？

.field {
   float: left;
 }

http://jsfiddle.net/aBeF8/2/

您的 HTML 代码不尊重 HTML 文档的浮动和逻辑：您应该重新组合相同信息单元的元素（这里：标签及其输入）。

【讨论】：

【解决方案3】：

使用 css 列可能是最简单的方法。

参见小提琴：http://jsfiddle.net/aBeF8/8/

.field-row {
    -moz-column-width: 128px;
    -webkit-column-width: 128px;
     -column-width: 128px;
    -webkit-column-gap: 0px;
    column-gap: 0px;
}
label { display: block; border-bottom: 1px solid gray; }
input {
    width: 90%;
    display:inline-block;
}

只要确保容器的宽度不会太小或太大。否则，您可能需要相应地调整宽度。

另一个变体（根据您上面关于边框的评论）：http://jsfiddle.net/aBeF8/10/

而且，这个使用column-rule 给它一个表格外观：http://jsfiddle.net/aBeF8/11/

旁白：你应该使用labels 和for 而不是spans 作为标签。

【讨论】：

表单是在企业应用程序中动态生成的。我无法更改为使用 label 代替 span，也无法使用 for。
@Neel：在这种情况下没关系。只需将 css 中的 label 替换为 span。我已经更新了答案以包含另一个带有边框的小提琴。

【解决方案4】：

这里是html代码。

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

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

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

这里是css

.field-row {
  overflow: hidden;
}

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

.field-row .field-container {
  width: 30%;
  float: left;
}
.field-container span {
border: 1px solid #ccc;
display: block;
width: 93%;
}

请查看Demo链接。

请查看我更新的Demo

【讨论】：

这回答了原始问题，但它不允许标签行中的边框。