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或table是唯一的方法吗？

[编辑] 很抱歉，在原始问题中遗漏了此内容。

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

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

Answer 1

你想要这样的东西吗？

.field {
   float: left;
 }

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

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

Answer 2

这是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

Answer 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/

除了：您应该将label与for而不是span用于标签。

Answer 4

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

您的HTML代码已生成，因此您无法对其进行修改。
您需要在标签行周围添加边框。

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

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

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

使用css的html表单的列布局

4 个答案: