格式化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表單佈局

回答

相關問題