格式化HTML表单布局

Question

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

当前布局：

Field1
Field2
Field3
Field4
Field5
Field6

新布局：

Field1     Field3     Field5
Field2     Field4     Field6

解决这个问题的最佳方法是什么？

提前感谢

Answer 1

为了获得正确的选项卡顺序（如果您不想手动设置它们），您应该为每列创建一个包装器元素，并使它们相邻浮动。

<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