如何为多个到多个选择框创建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列？

回答

相关问题