Есть несколько вариантов такого выравнивания.
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 ...но принцип понятен, надеюсь.
⇢