radio 和checkbox与文字对齐问题
今天在项目中遇到radio和文字对齐问题(ie不明显，火狐和google比较明显)，在此记录。
1.浏览器默认文字大小为14px，因而当文字字体为14px时radio和checkbox与文字对齐良好，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="radio" value="1"> 1
<input type="radio" value="2"> 2
<input type="radio" value="3"> 3
<input type="radio" value="4"> 4
<input type="radio" value="5"> 5
<input type="radio" value="6"> >5
<br/>
<input type="radio" value="1"> 学生
<input type="radio" value="2"> 老师
</body>
</html>
输出结果如下：
2.更改字体大小，对齐出现问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {
font-size: 12px;
}
</style>
</head>
<body>
<input type="radio" value="1"> 1
<input type="radio" value="2"> 2
<input type="radio" value="3"> 3
<input type="radio" value="4"> 4
<input type="radio" value="5"> 5
<input type="radio" value="6"> >5
<br/>
<input type="radio" value="1"> 学生
<input type="radio" value="2"> 老师 </body>
</html>
输出结果如下：
若字体更改为10px或者更小对齐问题更加严重（当然字体大于14px也会出现类似问题）如下为字体为10px时
3.解决方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {
font-size: 12px;
}
.inputStyle {
vertical-align: text-bottom;
margin-bottom: 2px;
*margin-bottom: -2px; //兼容IE6，IE7
}
</style>
</head>
<body>
<input type="radio" value="1" class="inputStyle"> 1
<input type="radio" value="2" class="inputStyle"> 2
<input type="radio" value="3" class="inputStyle"> 3
<input type="radio" value="4" class="inputStyle"> 4
<input type="radio" value="5" class="inputStyle"> 5
<input type="radio" value="6" class="inputStyle"> >5
<br/>
<br/>
<input type="radio" value="1" class="inputStyle"> 学生
<input type="radio" value="2" class="inputStyle"> 老师 </body>
</html>
效果如下：
4.其他方法
radio 和checkbox与文字对齐问题的更多相关文章
- checkbox与文字对齐
checkbox和后面的文字如果不加样式,会导致checkbox和文字对齐,解决办法是对checkbox和文字同时添加如下样式: vertical-align:middle;
- checkbox与文字对齐方式（同样可用于radio单选框）
checkbox 在chrome 和 firefox中 间距是由margin撑开, IE中则是由padding,并且无法设置边框: 主要参考大神的博客,http://www.zhangxinxu. ...
- checkbox和文字对齐
<style type="text/css"> input{vertical-align:middle; margin-top:0;} </style>
- checkbox/input文本框与文字对齐
3种方法都能实现checkbox文本框或radio文本框与文字对齐: <meta charset="utf-8"> <input style="vert ...
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...
- input框和文字对齐问题
css样式解决! style="vertical-align: text-bottom;margin-bottom: 2px;"一.问题产生的条件对于14像素大小的字体是没有本篇所 ...
- 前端开发：css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- label按钮和文字对齐
label按钮和文字对齐 做表单的时候,经常遇到:复选框和文字对不齐的情况 ========================== 下面方法可以对齐 <!--label [[--> < ...
随机推荐
- Valgrind简介：
Valgrind是动态分析工具的框架.有很多Valgrind工具可以自动的检测许多内存管理和多进程/线程的bugs,在细节上剖析你的程序.你也可以利用Valgrind框架来实现自己的工具. Valgr ...
- Eclipse中使用git把项目导入到osc@git中
方便Eclipse用户使用Git把项目导入到osc@git中进行管理. Eclipse Git osc@git 一.原有项目: 项目名为TestGit 二.在osc@git上面创建一个新项目库. 填 ...
- Android 环境下编译FFmpeg
Android 环境下编译FFmpeg 开发环境:Ubuntu 12.04.2 LTS , android-sdk-linux, android-ndk-r8e 一 .X264 编译 1. X2 ...
- Word 查找和替换的通配符
查找和替换的通配符 若要查找 类型 示例 任意单个字符 ? s?t 可查找“sat”和“set”. 任意字符串 * s*d 可查找“sad”和“started”. 单词的开头 < <(in ...
- 使用WMI来控制Windows目录 和windows共享机制
1.使用WMI来控制Windows目录 本文主要介绍如何使用WMI来查询目录是否存在.文件是否存在.如何建立目录.删除目录,删除文件.如何利用命令行拷贝文件,如何利用WMI拷贝文件 using Sys ...
- ASP.NET菜鸟之路之Response小例子
背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. Response.Write Redirect ...
- JS格式化数字金额用逗号隔开保留两位小数
JS格式化金额,正则方式修改. /** * 格式化金额 * @param {[type]} v [要转换的数字] * @param {[type]} len [小数点位数,默认2位] * @param ...
- Python文件之----JSON
#coding=utf-8import json def writeJSON(filaName="test.json"): f=open(filaName, "wb&qu ...
- 使用Maven构建javaWeb项目时，启动tomcat出错：严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener java.lang.ClassNotFoundException: org.springframework.web.conte
在初学使用maven构建javaWeb的项目的时候,启动tomcat加载时,总是提示如下错误,辛苦一番终于找到解决办法. 严重: Error configuring application liste ...
- 你好，C++（31）我终于找到对象啦！6.1 从结构化设计到面向对象程序设计
第6章 当C++爱上面向对象 很多第一次进入C++世界的人都会问:C++中的那两个加号到底是什么意思啊? C++是由C语言发展而来的,它比C语言多出的两个加号,实际上是C语言的自增操作符,表示C++语 ...