今天在写页面时,发现了一个问题,当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. git命令学习用

  2. scanf

    scanf函数: (1)与printf函数一样,都被定义在头文件stdio.h里,因此在使用scanf函数时要加上#include <stdio.h>.它是格式输入函数,即按用户指定的格式 ...

  3. IP地址 子网掩码 默认网关 网络地址 广播地址

    “IP地址”是“TCP/IP”(Transmite Control Protocol 传输控制协议/Internet Protocol网际协议)里其中的一种协议. Internet之所以能将广阔范围内 ...

  4. javascript笔记2-引用类型

    引用类型是一种数据结构,用于将数据和功能组织在一起.它描述的是一类对象所具有的属性和方法.Object是一个基础类型,Array是数组类型,Date是日期类型,RegExp是正则表达式类型,等. Ob ...

  5. IOS socket开发基础

    摘要 详细介绍了iOS的socket开发,说明了tcp和udp的区别,简单说明了tcp的三次握手四次挥手,用c语言分别实现了TCPsocket和UDPsocket的客户端和服务端,本文的作用是让我们了 ...

  6. BZOJ 4027 兔子与樱花

    原来想的是给所有点排序....但是要修改啊...然后发现对于儿子排序就可以了. #include<iostream> #include<cstdio> #include< ...

  7. R——启程——豆瓣影评分析

    专业统计的我,自然免不了学R的,今天仔细看了这篇教程(感谢学姐的推荐@喜欢算法的女青年),就学着用R仿照着做一个,作为R语言学习的起点吧. 影评数据是用python爬的,之后会在python爬虫系列补 ...

  8. HTTP Live Streaming直播(iOS直播)技术分析与实现

    前些日子,也是项目需要,花了一些时间研究了HTTP Live Streaming(HLS)技术,并实现了一个HLS编码器HLSLiveEncoder,当然,C++写的.其功能是采集摄像头与麦克风,实时 ...

  9. CODEVS1380 没有上司的舞会 (树形DP)

    f[i,0] 表示 第i个人不参加舞会 f[i,1] 表示 第i个人参加舞会 f[i,1]=sigma(f[j,0])+v[i]   j 为 i 的孩子 f[i,1]=sigma(max(f[j,0] ...

  10. [转]50 Shades of Go: Traps, Gotchas, and Common Mistakes for New Golang Devs

    http://devs.cloudimmunity.com/gotchas-and-common-mistakes-in-go-golang/ 50 Shades of Go: Traps, Gotc ...