今天在写页面时,发现了一个问题,当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. iOS:图片拉伸不变形技巧

    方法: 假设图片为60*24 CGFloat top = image.height*0.5-1; // 顶端盖高度 CGFloat bottom = top ; // 底端盖高度 CGFloat le ...

  2. Visual Studio 2013 Update 2 and with Update 2

    Microsoft 的开发工具 Visual Studio 2013 迎来 Update2 更新.本次更新将为普通开发者带来更多全新功能.修复之前旧版 Bugs.提升性能以及稳定性.之前已经安装 VS ...

  3. DirectX 总结和DirectX 9.0 学习笔记

    转自:http://www.cnblogs.com/graphics/archive/2009/11/25/1583682.html DirectX 总结 DDS DirectXDraw Surfac ...

  4. hdu 2083

    ps:N个数中,中位数是最小距离...第一次WA是因为排序之后最小和最大相加除2...应该是找他们的中位数,而不是中间数. 代码: #include "stdio.h" #incl ...

  5. iOS 获取IP地址

    一.获取本机IP地址 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 #import <ifadd ...

  6. C# 线程问题

    一:概述和概念 C#支持通过多线程并行地执行代码,一个线程有它独立的执行路径,能够与其它的线程同时地运行.一个C#程序开始于一个单线程,这个单线程是被CLR和操作系统(也称为"主线程&quo ...

  7. iOS开发 coreText

    coreText的demo下载地址:http://download.csdn.net/detail/shaoting19910730/9254143 NSTextView和Attribued Stri ...

  8. HDU5441 Travel 并查集

    http://acm.hdu.edu.cn/showproblem.php?pid=5441 无向图,n个点,m条带权边,q次询问,给出数值d,点a可以到点b当且仅当存在一条路线其中最大的权值不超过d ...

  9. 16、SQL基础整理(触发器.方便备份)

    触发器(方便备份) 本质上还是一个存储过程,只不过不是通过exec来调用执行,而是通过增删改数据库的操作来执行(可以操作视图) 全部禁用触发器 alter table teacher disable ...

  10. magento转移服务器和magento建立多站点总结

    magento转移服务器和magento建立多站点总结第一. 我们首先要做的就是把服务器上的magento转移到本地上来.详细步骤:1. 直接用magento的备份系统把网上数据库备份.如图:2. 数 ...