如何爲多個到多個選擇框創建CSS列？

我一直在試圖將簡單的表格佈局轉換爲CSS！我敢肯定，我錯過了一些東西（像是一個體面的CSS知識:)如何爲多個到多個選擇框創建CSS列？

在這種形式我有一個多對多的選擇設施。用戶可以將值輸入到文本框中，匹配值顯示在「可用」選擇框中，並且存在按鈕以將選項移動到「選定」選擇框/從中選擇。

表佈局的結構是這樣的：

<table> 

<tr> 

<td>Field Label</td> 

<td>TEXT BOX<br />"AVAILABLE OPTION" SELECT BOX</td> 

<td><-Button<br />Button-></td> 

<td>"SELECTED" SELECT BOX</td> 

</tr> 

</table>

換句話說，我希望能有4列如下：

列1：標籤

2列：文本框，用選擇框下方

第3列：按鈕< - 和 - >

第4列：一個選擇框。

我離開了漂浮的標籤，並給它一個寬度，在選擇框中添加了文本框，換行符，邊距，但是如何使用按鈕創建下一列，最後一列是最終的選擇？

任何幫助將感激地收到！

來源

2010-10-20 JohnK

怎麼樣發佈您想要轉換的佈局*從*，或者您想要轉換的圖像*到*？ [JS Bin]（http://jsbin.com/）和[JS Fiddle]（http://jsfiddle.net/）都是發佈實時代碼的有用資源。 – 2010-10-20 22:41:29

四個跨度，一個接一個，對應您的原始元素。將每個跨度設置爲顯示：行內塊。

來源

2010-10-20 21:23:25 bblack

我通常用列表節點處理這個問題，但幾乎所有通常的節點類型都會這樣做（div，span等）。這個想法是爲每個列創建一個容器元素，並且每個左邊都浮動。爲容器元素（在本例中爲ul）添加一個overflow：hidden，以便瀏覽器正確計算嵌套在內部的浮動元素的高度。顯示：在浮動的li上內聯修復了一個ie6雙重保證金錯誤。 http://jsfiddle.net/brianflanagan/QU2HB/

來源

2010-10-20 23:12:26

如何爲多個到多個選擇框創建CSS列？

回答

相關問題