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 [[--> < ...
随机推荐
- Windows下Android Studio长时间停留在Building "Project Name" Gradle project info画面的解决方法
问题描述: 创建好一个Android项目后,Android Studio长时间停留在Building [Project Name] Gradle project info画面不动. 原因: 此时And ...
- Centos ssh 登陆乱码解决办法
1.vi /etc/sysconfig/i18n 将内容改为 LANG="zh_CN.GB18030"LANGUAGE="zh_CN.GB18030:zh_CN.GB23 ...
- Python操作MySQL -即pymysql/SQLAlchemy用法
本节介绍Python对于MySQL的一些操作用法 模块1:pymysql(等同于MySQLdb) 说明:pymysql与MySQLdb模块的使用基本相同,学会pymysql,使用MySQLdb也就不是 ...
- 错误记录--关于foreach，集合已修改；可能无法执行枚举操作
集合已修改,可能无法执行枚举操作.今天在使用foreach遍历的时候出现了这样的错误.查了一下,这个是使用foreach的典型的错误问题问题.foreach在遍历取数据的过程中,枚举器只允许读,不允许 ...
- JS获取客户端的窗口大小
function getClientSize() { var c = window, b = document, a = b.documentElement; if (c.in ...
- Excel.Application手册
----转载:http://blog.csdn.net/xxfigo/article/details/6618129 定制模块行为(1) Option Explicit '强制对模块内所有变量进行声明 ...
- （转）PHP数组的总结(很全面啊)
一.什么是数组数组就是一组数据的集合,把一系列数据组织起来,形成一个可操作的整体.数组的每个实体都包含两项:键和值. 二.声明数据在PHP中声明数组的方式主要有两种:一是应用array()函数声明数组 ...
- 标量类型(scalar)
(ISO C11 §6.2.5) Arithmetic types and pointer types are collectively called scalar types. Array and ...
- Objective-C基础知识点总结
一.#import 和 #include 的区别,@class代表什么?@class 和 #import 的区别?#import<> 和 #import""的区别 答: ...
- asp.net 图片质量压缩(不改变尺寸)
private static ImageCodecInfo GetEncoderInfo(String mimeType) { int j; ImageCodecInfo[] encoders; en ...