В комментариях к предыдущей заметке было справедливо замечено, что не был рассмотрен вариант, когда 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’е. В несколько другой разметке поведение весьма корректное, а вот в этой, “оптимизированной”, мне пока не удается его добиться. Видимо, это не последняя заметка по теме форм :)
