1

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

当前布局：

Field1
Field2
Field3
Field4
Field5
Field6

新版面：

Field1     Field3     Field5
Field2     Field4     Field6

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

提前致谢

4

4 回答 4

2

为了获得正确的制表符顺序（如果您不想手动设置它们），您应该为每一列创建一个包装元素并让它们彼此相邻浮动。

<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。

于 2012-07-13T18:25:20.307 回答
1

您可以简单地使用 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;
}
于 2012-07-13T18:26:22.737 回答
0

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

于 2012-07-13T18:23:00.773 回答
0

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

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

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

于 2012-07-13T18:25:02.630 回答