Другие языки программирования и технологии

CSS-стили форм поиска по произвольным полям Wordpress

Собственно, сабж для профессионалов css:
На Wordpress установлен плагин WP Search Custom Field. На странице поиска по произвольным полям необходимо оформить эти поля по два в каждой строке. Для наглядности поясню - при использовании column-count: 2 выходит так:

Параметр 1: от (форма custom field1) до (форма custom field4)
до (форма custom field2) Параметр 3: от (форма custom field5)
Параметр 2: от (форма custom field3) до (форма custom field6)

А нужно оформить таким образом:

Параметр 1: от (форма custom field1) до (форма custom field2)
Параметр 2: от (форма custom field3) до (форма custom field4)
Параметр 3: от (форма custom field5) до (форма custom field6)

Внимание, вопрос! Как это можно сделать?
Олег Кирин
Олег Кирин
3 501
Есть несколько вариантов такого выравнивания.
1) float: left; width: [ширина элемента] ; [margin: отступы]
Минус - в конце обычно требуется сброс (элемент, или псевдоэлемент с clear: left;), либо overflow: hidden; для родительского блока с элементами, у которых стоит float
Могут быть проблемы в IE <8 с размерами элементов в % и отступами

2) display: inline-block; width: [ширина элемента] ; [margin: отступы] [vertical-align: ...]
Минус - элементы ведут себя как инлайн. Т. е. выстраиваются в строку, но при этом между ними появляются отступы, зависящие от форматирования кода:
<элемент /><элемент /> - между элементами нет отступа.
<элемент /> <элемент />
или:
<элемент />
<элемент />
- есть отступ, равный одному пробелу (зависит от размера шрифта) . Проблема решается обычно обнулением размера для родительского элемента (font-size: 0;) и восстановлением размера для выравниваемых (e.g. font-size: 14px;), либо отрицательным margin (-1em) для нужных выравниваемых элементов ( например: input:nth-child(2n) { margin-left: -1em; })

3) Колонки. Только поля нужно расположить иначе: не от 1, до 2, от 3, до 4...,а от 1, от 2, от 3, до 4, до 5, до 6.
Поиск будет от поля 1 до поля 3, от 2 до 5, от 3 до 6. Не в курсе, позволяет ли это сделать плагин, но способ наименее кроссбраузерный. Не работает в IE<10 и в Android.

Первый способ наиболее кроссбраузерен (работает везде без костылей) . Второй требует костылей для IE<8. (//display: inline; //zoom1; для поддержки inliine-block, :nth-child() без скриптов в IE <9 не поддерживается, но можно перечислить элементы по name, или классам/id). Ну, и еще имеются варианты: таблица, или display: table [table-row, table-cell], позиционирование и т. д. Они в большинстве случаев неудобны.
Не писал стили и элементы потому как непонятно какие элементы будут выравниваться: label, input ...но принцип понятен, надеюсь.
ВТ
Василий Трифонов
60 970
Лучший ответ
Олег Кирин Стили:
.searchform-label [
display: block;
float: left;
width: 25%;
overflow: hidden;
font-size:0.8 em;
font-family: sans-serif;
font-weight: normal;
padding-top: 1px;
]
.searchform-input-wrapper [
display: block;
float: left;
text-align: left;
width: 40%;
vertical-align: center;
margin: 3px;
]
.searchform-input-wrapper .radio-button-wrapper input [
float: left;
]
#sidebar .searchform-input-wrapper input,
.searchform-input-wrapper input,
.searchform-input-wrapper select{
display: block;
width: 33%;
]
.searchform-param [
clear: left;

]
.searchform-params [
display: block;
clear: left;

]
.searchform-controls [
clear: left;
text-align: center;
]
.searchform-spoiler [
width: 100%;
text-align: center;
size: 0.5em;
opacity: 50%;
margin: 5px;
]
По размерам - ширины явно хватает. В 1 строку не становятся.