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

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

  1. <p><em>邮箱</em><textarea style='height:150px;width:540px;'></textarea> </p>
  1. #content .form p em{
  2. display: inline-block;
  3. width:70px;
  4. text-align: right;
  5. margin-right: 20px;
  6. }

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

实现代码如下:

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

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

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

  1. [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域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的区别(转载)

    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:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)

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

随机推荐

  1. PHP的学习--解析URL

    PHP中有两个方法可以用来解析URL,分别是parse_url和parse_str. parse_url 解析 URL,返回其组成部分 mixed parse_url ( string $url [, ...

  2. Unity3D Player角色移动控制脚本

    1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position.之前写过类似的文章,这次增加了平时常用API的脚本,每个脚本均手打测试可用. 2. ...

  3. 【Android】[转] ANR的分析和问题处理

    一:什么是ANR ANR:Application Not Responding,即应用无响应 二:ANR的类型 ANR一般有三种类型: 1. KeyDispatchTimeout(5 seconds) ...

  4. UIkit – 轻量级前端框架,帮助你快速构建 Web 界面

    UIKit 是一个轻量级,模块化的前端框架,用于构建快速和强大的 Web 界面.UIKit 为您提供了 HTML,CSS 和 JavaScirpt 组件,使用简单,容易定制和扩展.UIKit 基于 L ...

  5. JVM之类加载器下篇

    除了自定义的类加载之外,jvm存在三种类加载器,并以一种父委托的加载机制进行加载. --启动类加载器,又称根加载器,是一个native的方法,使用c++实现.在java中我们用null标识,用于加载j ...

  6. nginx+uwsgi+django+celery+supervisord环境部署

    前言 很久没更博客了,最近新写了一个小项目,后边有时间把一些心得放上来,先把环境的部署方式整理出来. 部署过程 先将环境的python升级为2.7 保证有pip 安装了nginx并配置 vim /Da ...

  7. 用Qt写软件系列五:一个安全防护软件的制作(2)

    引言 在上一篇中讲述了主窗体的创建和设计.主窗体的无边框效果.阴影效果.拖动事件处理.窗体美化等工作在前面的博客中早就涉及,因此上篇博文中并未花费过多笔墨.这一篇继续讲述工具箱(Tool Button ...

  8. C#--常量

  9. Git for Windows v2.11.0 Release Notes

    homepage faq contribute bugs questions Git for Windows v2.11.0 Release Notes Latest update: December ...

  10. STM32 DMA使用详解

    DMA部分我用到的相对简单,当然,可能这是新东西,我暂时还用不到它的复杂功能吧.下面用问答的形式表达我的思路. DMA有什么用? 直接存储器存取用来提供在外设和存储器之间或者存储器和存储器之间的高速数 ...