格式化 HTML 表单布局答案

【问题标题】：formatting HTML form layout格式化 HTML 表单布局
【发布时间】：2012-07-13 18:19:03
【问题描述】：

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

当前布局：

Field1
Field2
Field3
Field4
Field5
Field6

新布局：

Field1     Field3     Field5
Field2     Field4     Field6

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

提前致谢

【问题讨论】：

使用 CSS 您可以包装字段并使其浮动。
你试过什么？一个简单的方法可能是使用表格，但很大程度上取决于您的页面是如何设置的
阅读 Twitter Bootstrap。这是一个“CSS 框架”，非常棒。但是，首先，去学习 CSS。 W3Schools 是一个很好的起点。
一张桌子会把这里的表格弄乱。
@AndreCalil 我推荐 MDN 而不是 w3schools

标签： c# jquery html css asp.net-mvc

【解决方案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。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

您可以使用具有 3 列的表格，也可以使用 div。

【讨论】：

【解决方案4】：

我建议你将 div 与 css 一起用于布局而不是表格

table 适合表格数据，但如果需要更多，那么 div 更好

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

【讨论】：