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

时间: 2024-10-16 20:47:53

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

HTML一个form表单中有两个(多个)submit,后台如何区分(纯HTML实现,无需javascript)

一个表单中有时可能会有多个Submit元素,如何在后台区分哪个按钮被点击呢? 网上很多人说用javascript,写一个长长的函数,点击不同的按钮提交不同的数据:还有的说用多个表单:其实完全不需要这么麻烦. 两种方法可以实现,不需要使用javascript. 方法一.使用不同的name属性 <form method="post"> <input type="submit" name="save" value="保存设置

如何开发一个java开源框架-----Jvn框架之实现文件的上传以及方法封装(第六讲)八哥实力讲解

前言 一 . 博主正在教大家如何开发一个javaEE框架(Jvn框架),博客里有完整的开发视频,每一篇博文都是一个知识点,帮助大家理解框架: 博客首页:http://www.cnblogs.com/everxs/ 本次内容视频以及源码下载地址:http://pan.baidu.com/s/1pJsoGDd 1,为什么要使用java的框架,以及框架能带来什么好处.  2,帮助你们理解框架的原理. 3,框架是如何实现的.                                        

通达OA 工作流表单中关联查询另外一个工作流方法(源码)

一个工作流表单中,如何方便的查询相关的工作流表单内容,反复打开各个菜单必然需要造成多次点击浪费时间,切换也会带来思路的中断.这里通过js代码的方式把这个问题进行了解决. <style></style><script></script> <input title="流水号" align="left" hidden="0" style="text-align: left" na

表单中Readonly和Disabled的区别

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(

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

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(

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

今天写代码,遇到表单提交的问题,某个字段在不同的情况下,要传递不同的值进行赋值,试过一些方法都有些问题,后来请教前端同学,使用 disabled 这个属性终于搞定了问题,查到一篇讲解 readonly 和 disabled 的区别的文章挺好的,转载如下: Readonly 和 Disabled 是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly 只针对 input(text / password) 和 textarea

jsp页面的表单中submit和button的使用区别

今天在做增删改查时,使用了Javascrip语言,添加和修改完成以后,在做删除时,需要用form表单来获取. 问题来了,添加了form之后,添加和修改功能不好使了. 下面是我JSP页面中的按钮代码 类型type中应为button,不是submit.(一个form表单中可以有多个button按钮,却只能有一个submit按钮) submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了.如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须

java界面编程(2) ------ 按钮,文本输入框和文本区域

本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 上节创建了视窗,这是其他组件的容器,这节就来创建按钮. 创建按钮,只需要在希望出现的地方调用JButton的构造器即可. JButton是一个组件,它有自己的小窗口,能作为整个更新过程的一部分而自动被重绘.也就是说,你不必显示绘制一个按钮或者别的类型的控件,只要将其放在窗体上,它们可以自动绘制自己.采用上节的例子,在其基础上修改如下: public class SwingTes

文本如何做到垂直居中对齐

文本如何做到垂直居中对齐:建议:尽可能的手写代码,可以有效的提高学习效率和深度.网页布局中经常用到让文本在一行中垂直居中对齐.默认情况下文本是居上对齐的.实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <