текстовое поле и вертикальное выравнивание внутри таблицы - PullRequest
Новая
       22

текстовое поле и вертикальное выравнивание внутри таблицы

0 голосов
/ 31 августа 2011

У нас есть таблица с двумя столбцами: в каждой строке есть метка слева и поле ввода справа. Мы используем vertical-align=text-bottom; для выравнивания нижней части текста надписи с нижней частью текста в полях ввода.

Пока все хорошо.

Однако иногда вместо поля ввода у нас есть текстовая область (несколько строк). Нижняя часть метки слева совпадает с нижней частью последней строки текстовой области.

Есть ли способ выровнять текст слева с первой строкой текстовой области?

Упрощенный пример 

<table class="waiFormTable">
  <tr>
    <td><label>Label 1:</label></td>
    <td><input id="id" type="text" name="name" value="value" /></td>
  </tr>
  <tr>
    <td><label>Label 2:</label></td>
    <td><textarea id="id" type="text" name="name" value="value" /></td>
  </tr>
</table>

в CSS мы определяем: 

table.waiFormTable thead tr,
table.waiFormTable tbody tr {
  vertical-align: text-bottom;
}

В этом примере я хотел бы, чтобы текст «Метка 1:» был выровнен по нижнему краю с первой строкой текстовой области.

Ответы [ 3 ]

2 голосов
/ 31 августа 2011

Фактически, когда у вас есть текстовое поле, вы хотите выровнять его по верху.

Примените специальный стиль (например: labelTextarea) в этом случае 

<tr>
    <td class="labelTextarea"><label >Label 2:</label></td>
    <td><textarea id="id1" type="text" name="name1"  >value</textarea></td>
</tr>

: 

.labelTextarea{
vertical-align: top;
}
2 голосов
/ 31 августа 2011

Попробуйте

  1. добавить класс к td, включающий textarea

  2. , установить те же font и px для table, input и textarea.

  3. установить vertical-align:top; и некоторые padding на td, включающие textarea

    table.waiFormTable, table.waiFormTable input, table.waiFormTable textarea{
    font-family:arial;
    font-size:12px;
}

table.waiFormTable thead tr, table.waiFormTable tbody tr {
      vertical-align: text-bottom;
}

.textarea{
    vertical-align:top;
    padding-top:2px;
}

Примечание. Возможно, вам потребуется отрегулировать пиксель или два.

Пример: http://jsfiddle.net/jasongennaro/ccew8/

1 голос
/ 31 августа 2011

Я предлагаю вместо использования: vertical-align=text-bottom;

вы можете использовать: margin-top= 4px;

или некоторое другое количество пикселей, которое должно выровнять все метки с нижней частьюпервая строка.

...