checkbox & radio 的对齐问题
不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样。
重置 form checkbox & radio
因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦。
以下是 14px Arial 字体的解决方案:
1、css代码
.form { font: 14px/18px Arial, Helvetica, sans-serif; }
.form input, .form label { vertical-align: middle; }
.form label { margin-right: 6px; }
.form_checkbox, .form_radio {
margin: 0 3px 0 0;/*与右侧文字的间距*/
padding:;
width: 13px;
height: 13px;
/*ie7 ie6 根据不同的 font-size 设置不同的值*/
*vertical-align: 1px;
}
2、html代码
<form name="form1" method="post" action="" class="form">
<p>
<input type="checkbox" name="checkbox4" id="checkbox4" class="form_checkbox">
<label for="checkbox4">checkbox4</label>
<input type="checkbox" name="checkbox5" id="checkbox5" class="form_checkbox">
<label for="checkbox5">checkbox5</label>
<input type="checkbox" name="checkbox6" id="checkbox6" class="form_checkbox">
<label for="checkbox6">checkbox6</label>
</p>
<p>
<input type="radio" name="radio" id="radio4" value="radio4" class="form_radio">
<label for="radio4">radio4</label>
<input type="radio" name="radio" id="radio5" value="radio5" class="form_radio">
<label for="radio5">radio5</label>
<input type="radio" name="radio" id="radio6" value="radio6" class="form_radio">
<label for="radio6">radio6</label>
</p>
</form>
3、效果图
checkbox & radio 的对齐问题的更多相关文章
- radio 和checkbox与文字对齐问题
今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px,因而当文字字体为14px时radio和checkbox与文字对齐良好, ...
- jquery的checkbox,radio,select等方法总结
jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对 ...
- jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...
- checkbox radio select绑定
index11.html <html><head> <title>checkbox radio select绑定</title> <script ...
- 自定义checkbox/radio
一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...
- 【js】操作checkbox radio 的操作总结
摘要 总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来 html <input type="checkbox" value="1" ...
- jquery checkbox radio 标签 选中的3种方法
张映 发表于 2013-07-16 分类目录: js/jquery 标签:checkbox, jquery, radio, 选中 jquery 很灵活,checkbox radio标签选中的方法有很多 ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox
struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...
随机推荐
- SQL Server ErrorLog
SQL Server 使用ErrorLog记录SQL Server启动和运行过程中的信息,具体信息参考:<SQLSERVER errorlog讲解>.通常来说,ErrorLog是指SQL ...
- 掌握 Cinder 的设计思想 - 每天5分钟玩转 OpenStack(46)
上一节介绍了 Cinder 的架构,这节讨论 Cinder 个组件如何协同工作及其设计思想. 从 volume 创建流程看 cinder-* 子服务如何协同工作 对于 Cinder 学习来说,Volu ...
- EntityFramework之孩子删除(四)(你以为你真的懂了?)
前言 从表面去看待事物视线总有点被层层薄雾笼罩的感觉,当你静下心来思考并让指尖飞梭于键盘之上,终将会拨开浓雾见青天.这是我切身体验. 在EF关系配置中,我暂且将主体对象称作为父亲,而依赖对象称作为孩子 ...
- LTP随笔——本地调用ltp之ltp4j
关于ltp本地调用的相关参考请见LTP的Git项目:https://github.com/HIT-SCIR 以下以/home/lion/Desktop路径为例下面教程中出现的具体路径以你实际配置的为准 ...
- 利用xinetd进行时间同步
时间同步,往往是大型项目里一个基本的需求:如果现在有多台服务器需要时间同步为标准时间,一般有如下两种做法: 一:NTP服务 将一台能上外网的服务器配成公网时间服务器(譬如:ntp服务配置文件中的0.r ...
- EntityFramework 实体拆分和表拆分
之前有人问过 EF 如何进行实体拆分和表拆分?我记得当时认为不可能,理由忘记了,后来又有人发了一段配置截图,发现原来是可以的,不记录的东西容易忘掉,关于 EF 实体拆分和表拆分,下面是自己的一些整理. ...
- es6新特性分享
1.字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:includes()/startsWith()/endWith()返回bool值includes = ...
- golang开发环境配置及Beego框架安装
配置环境:Windows7推荐IDE:LiteIDEGO下载地址:http://www.golangtc.com/downloadBeego开发文档地址:http://beego.me/docs/in ...
- C# 打印PDF文件之使用不同打印机打印所有页面或部分页面
C# 打印PDF文件之使用不同打印机打印所有页面或部分页面 最近在逛国外各大编程社区论坛的时候,发现很多人都在问一个关于PDF文件打印的问题:打印时如何选择非默认打印机并设置打印页面的范围.而一般情况 ...
- VirtualBox安装Debian6的方法和步骤(详细)
下面是用VirtualBox安装Debian6的方法和步骤 l 新建一个文件夹,用于存放虚拟硬盘,如Debian l 打开VirtualBox,点击新建 l 输入虚拟机名称,Debian_6 l 给虚 ...