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

发布于 2024-12-02 09:58:41 字数 880 浏览 2 评论 0原文

我们有一个包含两列的表格：每行左侧有一个标签，右侧有一个输入框。我们使用 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;
}

：在这个示例中，我希望将“Label 1:”文本底部与文本区域的第一行对齐。

原文

We have a table with two columns: in each row there is a label on the left and an input box on the right.
We use vertical-align=text-bottom; to align the bottom of the label text with the bottom of the text in the input boxes.

So far so good.

However, sometimes we have a textarea (multiple lines) instead of the input box. The bottom of the label on the left is aligned with the bottom of the last line of the textarea.

Is there a way to align the text on the left with the first row of the textarea?

A simplified example

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

in the CSS we define:

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

In this example I would like to have "Label 1:" text-bottom aligned with the first row of the textarea.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终止放荡 2024-12-09 09:58:41

事实上，当你有一个文本区域时，你想与顶部对齐。

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

In fact, when you have a textarea, you want to align to the top.

Apply a special style (example : labelTextarea) in this case

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

with:

.labelTextarea{
vertical-align: top;
}

回复收藏 0 原文

清风夜微凉 2024-12-09 09:58:41

试试这个

向包含textarea的td添加一个类
为table、input和设置相同的font和px >textarea.

在包围textarea的td上设置一个vertical-align:top;和一些padding p>

table.waiFormTable, table.waiFormTable 输入, table.waiFormTable 文本区域{
    字体系列：arial；
    字体大小：12px；
}

table.waiFormTable thead tr, table.waiFormTable tbody tr {
      垂直对齐：文本底部；
}

.textarea{
    垂直对齐：顶部；
    顶部填充：2px；
}

注意：您可能需要调整一两个像素。

示例： http://jsfiddle.net/jasongennaro/ccew8/

Try this

add a class to the td enclosing the textarea
set the same font and px for the table, input and textarea.

set a vertical-align:top; and some padding on the td enclosing the 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;
}

Note: you may need to adjust by a pixel or two.

Example: http://jsfiddle.net/jasongennaro/ccew8/

回复收藏 0 原文