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

时间:2021-07-16 00:40:24

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

一个解决表单中的文字和文本区域(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代码 实现方式就是在再添加一个文字包裹一样的的空标签,然后然真正包裹文字的标签绝对定位,父元素进行相对定位,这样空标签顶替了因绝对定位失去的文档流,绝对定位默认父元素是左上角这样就实现了顶部对齐了

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

实现代码如下:

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

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

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

  1. &lbrack;Swift通天遁地&rsqb;二、表格表单-&lpar;12&rpar;设置表单文字对齐方式以及自适应高度的文本区域TextArea

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 通达OA二次开发 工作流表单中关联查询另外一个工作流方法(源代码)

    一个工作流表单中,怎样方便的查询相关的工作流表单内容.重复打开各个菜单必定须要造成多次点击浪费时间,切换也会带来思路的中断.这里通过js代码的方式把这个问题进行了解决. <style>&l ...

  3. jquery禁用form表单中的文本框

    //禁用form表单中所有的input[文本框.复选框.单选框],select[下拉选],多行文本框[textarea] function disableForm(formId, isDisabled ...

  4. 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片

    InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...

  5. 表单中Readonly和Disabled的区别&lpar;转载&rpar;

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass ...

  6. 表单中Readonly和Disabled的区别(转)

    今天做form提交的时候,用到了disabled,form提交的时候怎么获取都是null,后来用hidden解决了这个问题,但是考虑到为什么,最后找到了原因,转载一篇文章,说明一下 原文:http:/ ...

  7. 【转载】表单中 Readonly 和 Disabled 的区别

    今天写代码,遇到表单提交的问题,某个字段在不同的情况下,要传递不同的值进行赋值,试过一些方法都有些问题,后来请教前端同学,使用 disabled 这个属性终于搞定了问题,查到一篇讲解 readonly ...

  8. 关于表单中Readonly和Disabled

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass ...

  9. spring boot&colon;单文件上传&sol;多文件上传&sol;表单中多个文件域上传&lpar;spring boot 2&period;3&period;2&rpar;

    一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...

随机推荐

  1. &lbrack;Java Basics3&rsqb; XML&comma; Unit testing

    What's the difference between DOM and SAX? DOM creates tree-like representation of the XML document ...

  2. js中array的join和concat的区别

    首先:concat方法定义:concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.举例说明:1 /*concat()结果返回的是一个数组*/ 2 3 ...

  3. UNICODE

    // "; var i,j; var prevPage = -1; var nextPage = -1; beginId = setList[index].begin / 16 * 16 + ...

  4. 自己动手开发编译器(五)miniSharp语言的词法分析器

    稍微说明一点,整型常量和上面的标识符的词法,在调用lex.DefineToken时都多传了一个参数.这个参数是可选的描述信息,如果不传会直接使用正则表达式的字符串形式.而标识符的正则表达式有4万多个字 ...

  5. 一些爬虫中的snippet

    1.tornado 一个精简的异步爬虫(来自tornado的demo) #!/usr/bin/env python import time from datetime import timedelta ...

  6. Apache Kafka系列&lpar;二&rpar; 命令行工具(CLI)

    Apache Kafka命令行工具(Command Line Interface,CLI),下文简称CLI. 1. 启动Kafka 启动Kafka需要两步: 1.1. 启动ZooKeeper [roo ...

  7. mybatis无mapper&period;xml用法

    在datasource配置类上加上 @MapperScan("cn.x.x.dao")@Configuration <project xmlns="http://m ...

  8. Person Re-ID行人重试别数据集

    1. 杜克大学数据(DukeMTMC-reID) DukeMTMC 数据集是一个大规模标记的多目标多摄像机行人跟踪数据集.它提供了一个由 8 个同步摄像机记录的新型大型高清视频数据集,具有 7,000 ...

  9. 描述各自页面的 page

    一个小程序页面由四个文件组成(注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名).分别是: 页面 Page(JS文件) Page(Object) 函数用来注册一个页面.接受 ...

  10. Entity Framework 6&period;x 学习之Database First

    一.单表操作 1. 建表 CREATE TABLE [Chapter1].[Customer] ( , ), ) COLLATE Chinese_PRC_CI_AS NOT NULL, ) COLLA ...