В комментариях к предыдущей заметке было справедливо замечено, что не был рассмотрен вариант, когда label’ы располагаются слева от элементов. Исправляем упущение.
Для достижения результата я совместил предыдущую технику и definition list’ы. Код выглядит следующим образом:
fieldset dl dt,
fieldset dl dd {
margin:.4em 0;
}
fieldset dl dt {clear:left;}
fieldset dl label {
float:left;
width:30%;
margin-right:1em;
}
fieldset dl input,
fieldset dl select {
width:50%;
}
Не буду приводить html-разметку, она есть в работающем примере. Скажу только, что данный метод не работает в IE 5.0. В нем наши label’ы все так же находятся на строку выше.
Также не работает задуманное мною поведение при большом label’е. В несколько другой разметке поведение весьма корректное, а вот в этой, “оптимизированной”, мне пока не удается его добиться. Видимо, это не последняя заметка по теме форм :)
селект по ширине на два пикселя меньше инпутов.
То-то я не заметил..
у меня глаз придрочен, я даже 1пх сходу замечаю =)
dieldset – опечатка
Fedos, спасибо, исправил.
В прошлой версии все было в процентах, а сейчас – нет =(
Sorry, не заметил что тема форм получила развитие, и откомментировал старый пост. Вот мой взгляд на ту же проблему http://gansik.tagv.com/2006/11/css.html
Все таки в использовании классов вида “two-columns” есть что то неправильное ;)
Я бы ещё убрал br’ы после label’ов и добавил для label правило: display: block;
Sorry, это был комментарий к предыдущей части эпической драмы о формах.