Как создать 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: поле выбора.

Я оставил плавающую метку и присвоил ей ширину, добавил текстовое поле, разрыв строки, поле для поля выбора, но как мне создать следующий столбец с кнопками и последний столбец с окончательный выбор?

Любая помощь будет принята с благодарностью!

Answer 1

Обычно я работаю с узлом списка, но подойдет любой тип узлов (div, span и т. Д.). Идея состоит в том, чтобы создать элемент контейнера для каждого столбца и плавать в каждом левом углу. Добавьте переполнение: скрытое к элементу контейнера (в данном случае ul), чтобы браузеры правильно рассчитали высоту плавающих элементов, вложенных внутрь. Дисплей: встроенный в плавающем li исправляет ошибку с двойным полем ie6. http://jsfiddle.net/brianflanagan/QU2HB/

Answer 2

Четыре пролета, один за другим, соответствуют вашим исходным элементам. Установите для каждого интервала показ: inline-block.