一个解决表单中的文字和文本区域(textarea)上对齐的方法

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

一个解决表单中的文字和文本区域(textarea)上对齐的方法在进行表单布局的时候通常会遇到这样的情况

文本和textarea标签是底部对齐的

<p><em>邮箱</em><textarea style='height:150px;width:540px;'></textarea> </p>

#content .form p em{ display: inline-block; width:70px; text-align: right; margin-right: 20px;}

上面是html代码 实现方式就是在再添加一个文字包裹一样的的空标签,然后然真正包裹文字的标签绝对定位,父元素进行相对定位,这样空标签顶替了因绝对定位失去的文档流,绝对定位默认父元素是左上角这样就实现了顶部对齐了

实现代码如下:

<p class='PR'><em class='pa'>邮箱</em><em></em><textarea style='height:150px;width:540px;'></textarea></p>

注:pr和pa两个类分别表示相对定位和绝定位

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航