表格内的文本区域和垂直对齐

Question

我们有一个包含两列的表格：每一行左侧有一个标签，右侧有一个输入框。 我们使用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：”文本底部与文本区域的第一行对齐。

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

试试这个

1. 将类添加到包含textarea的td

2. 为table、input 和textarea 设置相同的font 和px。

3. 在td 上设置vertical-align:top; 和一些padding，将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;

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