一个解决表单中的文字和文本区域(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两个类分别表示相对定位和绝定位


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



猜您在找 获取文本区域(textarea)行数【换行获取输入用户名个数】 Jsp页面用table表格来让文字和文本框对齐 checkbox 复选框文本和文字对齐 Ext.form.TextArea文本区 html中 文字和文本的设置 解决图片和文字水平方向居中对齐 图片和文字放在一行对齐的方法 小程序 图片和文字放在一行对齐的方法