Question

我们有一个包含两列的表：每行中左侧有一个标签，右侧有一个输入框。我们使用vertical-align=text-bottom;将标签文本的底部与输入框中文本的底部对齐。

到目前为止一切顺利。

但是，有时我们有一个textarea（多行）而不是输入框。左侧标签的底部与textarea的 last 行的底部对齐。

有没有办法将左边的文字与textarea的第一个行对齐？

简化示例

<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;
}

在这个例子中，我想让“Label 1：”文本底部与textarea的第一行对齐。

Answer 1

事实上，当你有一个textarea时，你想要对齐到顶部。

在这种情况下应用特殊样式（例如：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;
}

Answer 2

试试这个

向td

textarea

为font，px和table设置相同的input和textarea。

在封闭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/

Answer 3

我建议不要使用：vertical-align=text-bottom;

您可以使用：margin-top= 4px;

或一些其他数量的像素，应该将所有标签与第一行的底部对齐。

textarea和表内的垂直对齐

3 个答案: