格式化HTML表单布局

Question

我有一个HTML表单，我需要格式化。 它是一个很长的形式，人们必须滚动（垂直）才能访问整个。 现在，我在表单字段的右侧有很多空白区域，我想将表单分成三个部分，并且与一个长垂直形式相比，水平显示三个部分。

当前布局：

Field1
Field2
Field3
Field4
Field5
Field6

新版面：

Field1     Field3     Field5
Field2     Field4     Field6

接近这个的最佳方法是什么？

提前致谢

Answer 1

为了实现正确的Tab键顺序（如果你不想手动设置它们），你应该为每一列创建一个包装元素，让它们相互浮动。

<div class="col">
<label>Field1 <input type="text"/></label>
<label>Field2 <input type="text"/></label>
</div>
<div class="col">
<label>Field3 <input type="text"/></label>
<label>Field4 <input type="text"/></label>
</div>
<div class="col">
<label>Field5 <input type="text"/></label>
<label>Field6 <input type="text"/></label>
</div>

CSS：

.col{
  width: 30%;
  float: left;
}

......这是jsFiddle 。

Answer 2

您可以简单地使用DIV和CSS

<div class="divContainer">
@foreach(var item in Model.YourCollectionProperty)
{
  <div class="divItem">
       Some content here
  </div>
}
</div>

现在有这个CSS

.divContainer
{
   width:100%;
}
.divItem
{
  width:33%; float:left;
}

Answer 3

您可以使用包含3列的表，也可以使用div。

Answer 4

我建议你使用div与css布局而不是表格

table适用于表格数据，但如果需要更多，则div更好

http://www.w3schools.com/html/html_layout.asp