css - 如何为多对多选择框创建 CSS 列？

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 列:

第 1 列:标签

第 2 列:一个文本框，下面有一个选择框

第 3 列:<- 和 -> 的按钮

第 4 列:一个选择框。

我已经让标签 float 并给它一个宽度，添加了文本框、一个换行符、选择框上的边距，但是我如何创建带有按钮的下一列，以及带有最终选择？

如有任何帮助，我们将不胜感激!

Answer 1

四个跨度，一个接一个，对应于您的原始元素。将每个 span 设置为具有 display:inline-block。