При выводе форм, модули Друпал как правило размещают элементы друг под другом. Это касается как названия элемента формы(label), так и непосредственно полей форм.
В случае, когда вы модуль и соответственно формы делаете сами, то проще всего разметку делать в самом модуле при построении формы. (Я обычно пользуюсь suffix-ами и prefix-ами). Но когда уже есть чей-то готовый модуль, то легче изменить расположение основных элементов с помощью CSS. Именно об этом случае я и хочу расказать.
Итак, первый случай - это когда мы хотим разместить label слева от поля ввода.
Как правило поле вместе с label "обернуто" в div с классом "form-item".
Допустим, что нашему полю с названием "Всего номеров" был присвоен id #edit-field-vsego-nomerov-value. Тогда id div-а "обертки" будет скорее всего #edit-field-vsego-nomerov-value-wrapper". Поэтому в style.css можно написать:
#edit-field-vsego-nomerov-value-wrapper.form-item label{
display:inline;
}Второй случай, это когда мы хотим разместить несколько полей не друг под другом, а горизонтально. К нашему полю добавляем в пример еще одно поле ("Количество одноместных номеров") с id edit-field-mest-1-value. Тогда в css файл пишем:
#edit-field-vsego-nomerov-value-wrapper.form-item,
#edit-field-mest-1-value-wrapper.form-item{
float: left;
}Все бы хорошо, но может так случиться, что под этими двумя полями у нас будет еще продолжение, которое мы хотим разместить уже на следующей строке. Если оставить все как есть, то следующее поле будет пытаться встать рядом с предыдущими двумя.
Предположим, что третье поле - это "дополнительное описание" с id edit-field-mest-other-value. Тогда необходимо еще дописать:
#edit-field-mest-other-value-wrapper.form-item{
clear:left;
}На этом все.
Отправить комментарий