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 ...
随机推荐
- 管理Fragment
转载原地址:http://blog.csdn.net/harvic880925/article/details/44927375 相关文章: 1.<Fragment详解之一——概述>2.& ...
- 在Windows平台搭建PHP开发环境(四)
一.概念 1.1 在Windows下搭建 wamp: apache(iis) + php + mysql +phpmyadmin 1.2 在Linux下搭建 lamp: linux + php ...
- C++ inline weak symbol and so on
关于inline这个关键字,听到强调得最多的是,它只是一种对于编译器的建议,而非强制执行的限定. 但事实上,即使这个优化最终由于函数太过复杂的原因没有达成,加上inline关键字(还有在类定义中直接定 ...
- EF中逆变和协变
EF中的增删改查: 实现步骤: 1.声明一个EF的上下文. bjhksjEntities dbContext = new bjhksjEntities(); 2.声明一个实体. HKSJ_USERS ...
- The Separator in Grid_BFS
Description Given a connected, undirected graph G = (V, E), where V is the vertex set consisting a c ...
- Qt Charts示例
Qt 5.7 有一些变化,把原来商业版的几个模块用GPLv3协议放到了社区版本里: Qt Charts (GPLv3) Qt Data Visualization (GPLv3) Qt Virtual ...
- .a包生成64位
./configure CC="/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain ...
- 15、SQL基础整理(视图)
视图 即虚拟表 系统-右键-新建视图 编辑前200行 select *from studentscore 代码创建法: create view studentscore as select stude ...
- HDU 2291
http://acm.hdu.edu.cn/showproblem.php?pid=2291 读题读的烦死了,今天果真不适合做题 题意:给两个n*n的矩阵,第一个代表一个人战胜一个人可以得到的经验值, ...
- JNI c++ 调用 java
----------------------------------------------c++--------------------------------------- #include &q ...