input、select等表单元素的对齐问题
今天在写页面时,发现了一个问题,当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等表单元素的对齐问题的更多相关文章
- vertical-align表单元素垂直对齐
原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...
- HTML 5 服务器发送事件、Input 类型、表单元素、表单属性
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...
- jquery attr处理checkbox / select 等表单元素时的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- HTML5 学习08——Input 类型、表单元素及属性
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...
- jquery attr处理checkbox / select 等表单元素时只能使用一次的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- Html5中input新增的表单元素和属性介绍。
input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
- 表单元素-select
<form> <select size="2"> <option value="JMS HADEN">JMS HADEN&l ...
- jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)
jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...
随机推荐
- Cisco IOS basic system management command reference
absolute : to specify an absolute time for a time-range (in time-range configuration mode) no absolu ...
- 上架app 到app store 的出现: “The IPA is invalid. It does not inlude a Payload directory.”错误处理
今天打包上传app到app store上遇到的一个错误,在xcode6.2下提示: The IPA is invalid. It does not inlude a Payload director ...
- python版恶俗古风自动生成器.py
python版恶俗古风自动生成器.py """ python版恶俗古风自动生成器.py 模仿自: http://www.jianshu.com/p/f893291674c ...
- 字符串常量演示Demo
public class StringDemo { public static void main(String[] args) { // TODO Auto-generated method stu ...
- poj2429 大数分解+dfs
//Accepted 172 KB 172 ms //该程序为随机性算法,运行时间不定 #include <cstdio> #include <cstring> #includ ...
- acm 20140825
为了自己的梦想,一次次的选择坚强.走上acm这条路,怎么也找不到让自己放弃的理由.我喜欢这种竞赛的氛围,我渴望在赛场上飞扬!想想过去的一个学习,自己并没有干点什么有意义的事.acm也没有好好的做!新的 ...
- JS 基于面向对象的 轮播图1
---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...
- MAT
http://www.yrom.net/blog/2014/08/29/eclipse-mat/
- 2016 - 1 - 22 HTTP(一)
一:通过URL找到服务器 1. URL的概念: 1.1 URL全称Uniform Resource Locatior 统一资源定位符 1.2 通过一个URL就可以找到互联网上的唯一的资源. 1.3 ...
- Why am I getting an error converting a Foo** → const Foo**?
Because converting Foo** → const Foo** would be invalid and dangerous. C++ allows the (safe) convers ...