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的。
事实上,当你有一个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;
}
是的,我尝试过,但标签文本的顶部与textarea的上面一行对齐。 textarea中文本的顶部不对应于textarea本身的顶部。我知道这不是一个主要区别,但它看起来“错误”。 – Matteo
好的,保留这个解决方案,并保留输入的顶部和底部,如'input,textarea {padding-bottom:0; padding-top:0;}' –
试试这个
一类添加到
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; }
注意:您可能需要一两个像素进行调整。
可以启动的jsfiddle和你开一个JavaScript的解决方案? – Ali
评论回复总是赞赏... – Matteo