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

时间：2015-07-09 12:50:50 阅读：407 评论：0 收藏：0 [点我收藏+]

标签：

在进行表单布局的时候通常会遇到这样的情况

技术分享

文本和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两个类分别表示相对定位和绝定位

标签：

原文地址：http://www.cnblogs.com/yy-hh/p/4632663.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行