文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。
这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮。在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle,也依然不能完美对齐。
解决办法:
1、文字大小必须是偶数,比如12PX。
2、将文字加上label标签并且也添加vertical-align:middle样式。
3、然后去除表单元素的边距。
案例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="test2" value="2" type="radio">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input class="inputcheckbox " name="Button1" type="button" value="按钮" />
<br/><br/>
<select class="inputcheckbox " name="Select1">
<option>测试文字</option>
</select>
<label>测试文字</label>
</body>
</html>
文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。的更多相关文章
- HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...
- 了解HTML表单之form元素
前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...
- 如何disabled禁用所有表单input输入框元素
转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...
- asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法
MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交
- 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...
- jquery validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- javaweb action无法跳转、表单无法跳转的解决方法
action无法跳转,表单无法跳转的解决方法 刚在网上搜索了一下,发现我的这篇文章已被非常多人转载了去其他站点.暗爽,只是还是希望大家注明出处. 顺便说明一下.下面是在struts2中通过測试的 ac ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
随机推荐
- 接收对 http://192.168.1.18:8001/ObtainData/Service 的 HTTP 响应时发生错误。这可能是由于服务终结点绑定未使用 HTTP 协议造成的。这还可能是由于服务器中止了 HTTP 请求上下文(可能由于服务关闭)所致。
[2015/8/5 19:28:49]错误信息:接收对 http://192.168.1.18:8001/ObtainData/Service 的 HTTP 响应时发生错误.这可能是由于服务终结点绑定 ...
- Scala:(1)变量
Scala中变量需要注意的地方: (1)val,var val 定义的声明是一个常量,不能改变内容. var定义的声明是一个变量,可以改变其内容 在Scala中,尽可能使用val val answer ...
- C语言基础课程 第四课 它山之石可以攻玉---C语言数据类型和表达式
1 C语言中的数据类型 1.1 常量 常量就是在程序中不可变化的量 1.1.1 #define #define MAX 10 Define;//定义了一 ...
- Google Map API 学习2-界面展示
- Y86处理器的各个阶段
0x00e:30f480000000 | irmovl $128,%esp 实现所有Y86指令所需要的计算分为6个基本阶段:取值.译码.执行.访存.写回和更新 ...
- jQuery、实例大全
文章出处 http://www.cnblogs.com/suoning/p/5683047.html 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: ...
- HDU 3555 Bomb(数位DP)
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Subm ...
- IronPython fail to add reference to WebDriver.dll
在使用Ironpython引用WebDriver程序集做web自动化时碰到这个问题,出问题的代码很简单,如下: import sys import clr clr.AddReferenceToFile ...
- (转载)sinaeditor漏洞
SinaEditor简介 SinaEditor是基于新浪博客编辑器的开源编辑器.您可以用它来编辑富文本内容. 编辑器的核心是一个执行队列的调度系统,加入插件来实现功能,并通过事件来驱动编辑器的运行.我 ...
- 数学常数e的含义
转载: http://www.ruanyifeng.com/blog/2011/07/mathematical_constant_e.html 作者: 阮一峰 日期: 2011年7月 9日 1. ...