textarea的和一张桌子

内垂直对齐我们有两列的表：每一行中有左侧和右侧的输入框中的标签。我们使用vertical-align=text-bottom;将标签文本的底部与输入框中文本的底部对齐。textarea的和一张桌子

到目前为止这么好。

然而，有时我们有一个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; 
}

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

来源

2011-08-31 Matteo

可以启动的jsfiddle和你开一个JavaScript的解决方案？ – Ali

评论回复总是赞赏... – Matteo

事实上，当你有一个textarea，你要顶端对齐。在这种情况下

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

有：

采用特殊样式（labelTextarea为例）：

.labelTextarea{ 
vertical-align: top; 
}

来源

2011-08-31 12:06:37

是的，我尝试过，但标签文本的顶部与textarea的上面一行对齐。 textarea中文本的顶部不对应于textarea本身的顶部。我知道这不是一个主要区别，但它看起来“错误”。 – Matteo

好的，保留这个解决方案，并保留输入的顶部和底部，如'input，textarea {padding-bottom：0; padding-top：0;}' –

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

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

，或者应该排队的所有标签中的第一行的底部像素的其他一些量。

来源

2011-08-31 11:57:44

我想过，但通常我不喜欢使用绝对值来定义格式。根据字体/浏览器/操作系统的不同，页面可能会呈现不同的效果。 – Matteo

我同意，但我不认为有任何其他方式来做到这一点，因为文本区域没有第一行值。我想你应该在多个浏览器中测试这个，并自己定义字体。事实上，如果你自己设置单元格和输入框的高度，那么无论浏览器/操作系统如何，它都应该是一样的。 –

我担心如此...好的，谢谢我会尝试。 – Matteo

试试这个

一类添加到td封闭textarea
为table,input和textarea设置相同的font和px。

设置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/

来源

2011-08-31 12:24:01

textarea的和一张桌子

回答

相关问题