今天在写页面时,发现了一个问题,当INPUT、SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码。也不愿使用JS来实现图片button的效果,试好半天,发现原来一个vertical-align:middle就可搞定。

归纳如下:

1、.INPUT和图片按钮对齐:

<form method="post" action="ccc.asp">
<input type="text" name="title" onfocus="this.value=''" value="请输入单词">
<input type=image src="/img/dict.gif" align="absmiddle">
</form>

也可以在按钮的样式里面加入:vertical-align:middle;

2.INPUT和文字对齐
定义INPUT的样式,input {vertical-align:middle;},这样文字就会和INPUT框对齐。

3.以此类推,SELETE框等都如此
可以在全局CSS中定义:input,select{vertical-align:middle;} 省的后面麻烦。

input、select等表单元素的对齐问题的更多相关文章

  1. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  2. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  3. jquery attr处理checkbox / select 等表单元素时的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  4. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

  5. jquery attr处理checkbox / select 等表单元素时只能使用一次的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  6. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  7. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  8. 表单元素-select

    <form> <select size="2"> <option value="JMS HADEN">JMS HADEN&l ...

  9. jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)

    jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...

随机推荐

  1. 交互式报表和工作报表控件Stimulsoft Reports.Fx for Java

    Stimulsoft Reports.Fx for Java是一款Java平台下的报表工具控件,可以为您的应用程序添加交互式报表和工作报表.Java技术可以用于不同的平台.不同的操作系统和不同的硬件, ...

  2. 【转发】查看Linux版本系统信息方法汇总

    Linux下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然.   1.# uname -a   (Linux查看版本当前操作系统内核信息)   L ...

  3. Snagit 12 – 功能强的老牌截图软件

    老牌截图软件 Snagit 12 新版正式发布,相比旧版,Snagit 12 界面变得更加简洁,深色的配色增加了专业感,也更加舒服. 在功能上,Snagit 大幅简化了用户体验,不需要复杂的操作,只需 ...

  4. 在VS2010中打开VS2012的项目

    修改工程文件来把VS2012的工程文件移植到VS2010中 首先是修改解决方案文件(.sln文件). 使用记事本打开,把里面的 Microsoft Visual Studio Solution Fil ...

  5. hdu1505 dp

    //Accepted 5196 KB 109 ms //类似hdu1506 //输入数据的格式没有明确的限制 //可能出现以下情况 //5 5 //R //F //F F F //F F F F F ...

  6. 关于WinForm引用WPF窗体---在Winform窗体中使用WPF控件

    项目中有个界面展示用WPF实现起来比较简单,并且能提供更酷炫的效果,但是在WinForm中使用WPF窗体出现了问题,在网上找了一下有些人说Winform不能引用WPF的窗体,我就很纳闷,Win32都能 ...

  7. HDU5438--Ponds (拓排+BFS)

    点击打开链接 题意:给定n个池塘,m对池塘相连,现在要将与少于2个池塘相连的池塘拆除,形成森林,求节点数为奇数的树权值之和 思路:按照拓排的思想不断删除度数小于2的节点 #include<bit ...

  8. 禁止VMware用户在系统里删除网卡的操作的方法

    点击选项-常规-配置参数,如下图所示:   8)点击“添加行”,在新的栏目中,左栏输入:devices.hotplug,右边栏输入:false

  9. Redis - string类型操作

    以个人信息为例操作string类型 设置操作: set:     set key value            创建key-value名值对 setnx:      setnx key value ...

  10. Margaritas on the River Walk_背包

    Description One of the more popular activities in San Antonio is to enjoy margaritas in the park alo ...