Вопрос по html, forms, layout, css – Как выровнять метку текстовой области по верху?

23

У меня есть данные таблицы, как показано ниже:

<td>
    <label for="title">Title : </label>
    <textarea rows="5" id="title" name="title"></textarea>
</td>

расположение по умолчанию для метки находится внизу. Как разместить метку по верху текстовой области?

Ваш Ответ

3   ответа
2

label{display:block; float:left;}​

демонстрация скрипки:http://jsfiddle.net/kaMqg/1/

Да, но у плавания есть много побочных эффектов.
-1

<td>
    <label for="title">Title : </label>
    <br>
    <textarea rows="5" id="title" name="title"></textarea>
</td>
это поместит текстовую область в новую строку, а не ожидаемый результат (проверьте принятый ответ)
49

Со следующим CSS:

​textarea { vertical-align: top; }​

jsFiddle Demo vertical-align on MDN:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell element.

What is Vertical Align? on CSS-Tricks

если у вас есть смесь текстовых полей и полей ввода текста, это выглядит немного не так, поскольку метка для полей ввода будет выровнена по базовой линии; Есть ли хорошее решение CSS для выравнивания базовой линии этикетки иfirst строка содержимого текстовой области?
Я опоздал на 5 лет, но вы можете использоватьline-height в комбинации сvertical-align: top
@ysth Если вы играете сvertical-align (он также принимает значения длины и процента), вы можете приблизиться к этому:jsfiddle.net/aMLFE/95 (просто пример, это может зависеть от вашего стиля). Пробовал в Chrome, FF, IE11.

Похожие вопросы