複雜的表格與div

我在網上查找了使用DIV的表單實現的例子，我看到的所有例子都是非常簡單的一列表單。我有一些非常複雜的形式，這裏是一個的圖片：複雜的表格與div

http://img835.imageshack.us/img835/8292/formn.jpg

很容易使其與工作表中（這是我做的），我唯一的問題是，有時我需要不顯示某些選項並將值向上移動以避免出現空白。

我開始製作一些使用div的表單，但當我更改瀏覽器窗口大小時，它們會分崩離析，並且很難對齊事物。

此主題是很有幫助的： Is it bad design to use table tags when displaying forms in html? 但它沒有解決我的一些問題。

你會提出什麼樣的解決方案？我可以動態刪除/插入表中的值或嘗試執行DIV。

來源

2010-08-24 Roman Goyenko

忘了提 - 我需要它在IE6-7工作，日在噱頭最小寬度和其他IE錯誤中增加了一些複雜性。 – 2010-08-25 14:34:15

我會去div路線。只要您在應用浮動時注意寬度，實際上可以非常簡單地讓佈局在不同的屏幕分辨率下正常工作。

這裏有一些規則：

設置一個最大寬度表單或表單的包裝元素上。如果你想浮動一行上的元素，確保它們的寬度加在一起不超過這個寬度。
如果要向浮動元素添加水平填充/邊距，請記住這些元素會添加到元素的總寬度中。
避免混合百分比寬度與像素填充和邊距。將百分比寬度應用於父元素，並將像素填充/邊距應用於子元素。
在你的元素行之間使用清除元素來保持所有元素一致。

至於標記，你可以使用CSS與沿表單元素創建語義結構：

<fieldset> 
    <legend>Fieldset Title</legend> 

    <label for="input1">Input 1:</label> 
    <span><input type="text" id="input1" name="input1"/></span> 
    <label for="input2">Input 2:</label> 
    <span><input type="text" id="input2" name="input2"/></span> 

    <br/> 

    <label for="input3">Input 3:</label> 
    <span><input type="text" id="input3" name="input3"/></span> 
    <label for="input4">Input 4:</label> 
    <span><input type="text" id="input4" name="input4"/></span> 
</fieldset>

而CSS：

fieldset { 
    padding: 20px 0; 
    width: 600px; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    background: black; 
    color: white; 
} 

label, span{ 
    float: left; 
    width: 150px; 
} 

input { 
    width: 120px; 
} 

br { 
    clear: both; 
}

你可以see the result here。

來源

2010-08-24 23:12:05 Pat

這個解決方案有一個問題 - 我有幾個這樣的搜索表單，我動態地顯示搜索字段，並創建空白，當我不顯示一個領域，這是我想解決的主要問題。如果我跳過其中一個字段，您的解決方案將不會移動字段。 – 2010-08-26 13:53:31

@羅馬裏奧你的意思是說，如果你沒有在一列中顯示一個字段，下面的字段不會移動填補空白？ – Pat 2010-08-26 19:13:28

是的，這就是我想要做的 – 2010-10-29 15:39:21

如果它是一個固定寬度的表格，使用div和浮點佈局是很簡單的。只需將每個寬度設置爲您想要的值即可。

對於液體佈局表格和液體佈局通常是非常需要的，因爲float和position不容易計算像「這個單元格是在分配固定寬度標籤後，剩餘寬度的一半「。

因此，在這種情況下，當然包括您發佈的那種雙列表格，您的唯一可能性值爲table-*。如果您只瞄準IE8和其他現代瀏覽器，則可以在樣式表中使用div並設置display: table-row等。但是，爲了與IE6-7和其他舊版/移動版/小衆瀏覽器兼容，您將不得不使用實際的<table>/<tr>/<td>元素，因爲只有現代瀏覽器支持獨立於表元素的table-CSS。

這裏沒有什麼可恥的。無論如何，表單是一種半表格，並且沒有實際的可訪問性缺點，因爲頁面內容保持適當的順序。

注意：對於液體佈局形式，您還需要調整輸入字段的大小以匹配父元素。 input { width: 100%; }差不多這樣做，但並不完全，因爲width不包含默認情況下輸入的邊框或填充。您可以使用CSS3 box-sizing及其瀏覽器特定版本來解決現代瀏覽器的問題，但是如果您希望它與IE6-7上的像素完全對齊，則必須在父元素上使用填充等於子輸入字段上的邊框/填充。

來源

2010-08-24 23:48:54 bobince

General information是某種名單，鍵>值列表是準確的 - <dl />將可能是最好的結構，它
Issues values是一個表，
Ratings是一個表，
兩個Redemption和Indicators是列表 - 無序列表

來源

2010-08-24 23:56:42 Crozin

複雜的表格與div

回答

相關問題