格式化HTML表单布局

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

当前版面：

Field1 
Field2 
Field3 
Field4 
Field5 
Field6

新布局：

Field1  Field3  Field5 
Field2  Field4  Field6

什么是处理这个的最好方法？

在此先感谢

来源

2012-07-13 user793468

使用CSS你可以用字段和浮动它们。 – undefined 2012-07-13 18:21:17

你试过了什么？一个简单的方法可能是使用表格，但很多取决于您的页面设置 – Borophyll 2012-07-13 18:21:22

阅读关于Twitter Bootstrap。这是一个“CSS框架”，而且非常棒。但是，首先，去学习CSS。 W3Schools是一个开始的好地方。 – 2012-07-13 18:22:04

为了acheive的正确的标签顺序（如果你不想手动设置它们），你应该为每一列创建一个包装元素，并让它们漂浮在彼此旁边。

<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-13 18:25:20

您可以使用一个表3列，或做的div。

来源

2012-07-13 18:23:00

我会建议你使用DIV与CSS的布局不表

表是良好的表格数据，但如果需要比这再DIV越多越好

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

来源

2012-07-13 18:25:02 HatSoft

您可以简单地使用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-13 18:26:22 Shyju

格式化HTML表单布局

回答

相关问题