CSS вертикальное выравнивание: базовая линия с таблицами, формами и элементами

Question

Я пытаюсь создать форму, которая содержит входные данные, текстовые области и блочные элементы, каждый из которых имеет метку.Чтобы получить гибкую сетку, я использую таблицу.Для согласования вертикального выравнивания надписей и входов / textarea я установил vertical-align: baseline;, который отлично работает для входов и текстовых областей.Но не для divs ( см. Это jsFiddle ).Метка для div, следовательно, выровнена внизу ячейки, но я хочу, чтобы она была сверху, т.е. базовая линия должна быть сверху.

Как я могу добиться этого без изменения содержимого div или необходимости различаться между метками для входов / textareas и div?Есть ли способ заставить невидимую базовую линию находиться в верхней части ячейки таблицы?

Может быть, я не подхожу к проблеме с правой стороны, любая оценка приветствуется.

Answer 1

Используйте код ниже для вашей проблемы:

  td, label, textarea {
            vertical-align: top;
        }

Answer 2

Ваш div должен содержать как минимум один символ (например, ).

---

Для текстовых полей: "vertical-align: baseline;"работает только для Gecko.

Как сказал developer.mozilla.org ,

Спецификация HTML не определяет, где находится базовая линия .

Я нашел обходной путь для этого, но он меняет HTML.Я установил вертикальное выравнивание: text-top для текстовой области, и чтобы исправить зазор, вызванный высотой border-top и отступом верхней части текстовой области, я установил его как отрицательный margin-top.И чтобы текстовая область не перекрывала все элементы над ней, я поместил div вокруг текстовой области с отступом, чтобы уравновесить пробел.

HTML:

<div class="textarea-wrapper"><textarea id="b">nice vertical alignment</textarea></div>

CSS:

.textarea-wrapper {
    display: inline-block;
    padding-top: 1px; /* - margin-top of textarea */
}
.textarea-wrapper textarea {
    vertical-align: text-top;
    margin-top: -1px; /* - (border-top-width + padding-top) */
}

Я обновил jsFiddle .