Question

我一直在试图将简单的表格布局转换为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列如下：

Column1：Label

第2列：文本框，

下方有一个选择框

第3列：＆lt; - 和 - ＆gt;

的按钮

第4列：选择框。

我离开了标签并给它一个宽度，添加了文本框，换行符，选择框上的边距，但是如何使用按钮创建下一列，最后一列用最终选择？

任何帮助都会感激不尽！

Answer 1

四个跨度，一个接一个，对应于您的原始元素。将每个范围设置为显示：inline-block。

Answer 2

我通常使用列表节点来处理这个问题，但几乎任何常用的节点类型都会这样做（div，span等）。我们的想法是为每个列创建一个容器元素，并向左浮动。添加一个溢出：隐藏到容器元素（在本例中为ul），以便浏览器正确计算嵌套在其中的浮动元素的高度。显示：浮动li上的内联修复了一个ie6双边距错误。 http://jsfiddle.net/brianflanagan/QU2HB/

如何为多个选择框创建CSS列？

2 个答案: