今天在写页面时,发现了一个问题,当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. Codeforces Round #249 (Div. 2)

    A.水题. #include <cstdio> #include <iostream> #include <cstdlib> #include <cstrin ...

  2. SQL优化-索引

    (一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚集索引(nonc ...

  3. SVG 2D入门9 - 蒙板

    SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果.至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧. ...

  4. 2016 - 1 - 20 runloop学习(2)

    一:CFRunLoopModeRef 1. CFRunLoopModeRef带表RunLoop的运行模式 2. 一个Runloop可以有若干个mode,每个mode又包含若干个sourse,timer ...

  5. 使用HackRF+GNU Radio 破解吉普车钥匙信号

    引文 我最近对软件定义的无线电技术(SDR)产生了浓厚的兴趣,而我对其中一款流行的SDR平台(HackRF)也产生了兴趣,而其频率接收的范围也在1MHz ~6GHz之间(范围较广).而这里也需要提及一 ...

  6. 树莓派安装kali后的简单配置

    树莓派可以说是极客的最爱,可以根据不同的需求去做定制. 前文<使用树莓派和kali Linux打造便携式渗透套件>讲了一些使用树莓派的基础,主要侧重于将树莓派当作一个物理后门使用.我则更喜 ...

  7. BZOJ 4131 并行博弈

    发现必胜态只和(1,1)的状态有关. 无法得知必胜的方法,只知道谁会必胜. #include<iostream> #include<cstdio> #include<cs ...

  8. apache环境Zf2要装的intl验证

    sudo apt-get install php5-intl

  9. IO 流 定义

    一.什么是流? 流就是字节序列的抽象概念,能被连续读取数据的数据源和能被连续写入数据的接收端就是流,流机制是Java及C++中的一个重要机制,通过流我们可以自由地控制文件.内存.IO设备等数据的流向. ...

  10. Magento 自定义URL 地址重写 分类分级显示

    我们打算将URL在分类页面和产品页面分别定义为: domain.com/category/分类名.html domain.com/category/子分类名.html domain.com/goods ...