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 [[--> < ...
随机推荐
- android-个性化进度条
1.案例效果图 2.准备素材 progress1.png(78*78) progress2.png(78*78) ...
- javascript touch事件
touchstart : 當手指觸摸屏幕時觸發:即使已經有一個手指放在了屏幕上也會觸發. touchmove : 當手指在屏幕上滑動時連續的觸發,在這個事件發生期間,商用preventDefault( ...
- searchbar的使用介绍
searchBar的使用介绍 首先如何创建一个SearchBar实例: self.searchBar = [[UISearchBar alloc] initWithFrame: CGRectMake( ...
- JDK5-静态导入
import static 1. 导入一个类内所有静态成员 import static java.lang.Math.*; public class StaticImport { public sta ...
- 弹出层easydialog-v2.0
地址:http://www.lanrentuku.com/down/js/qita-862/ easydialog.css ;;; } .easyDialog_wrapper{ width:320px ...
- 触发TreeView的TreeNodeCheckChanged事件
这个事件不会主动postback,需要手动写javascript触发.对网上找到的方法做了些改进,增加UpdatePanel,以免页面不停的刷.这里就不考虑性能神马的了,因为既然项目已经允许选择使用T ...
- Hive学习之三 《Hive的表的详解和应用案例详解》
一.Hive的表 Hive的表分为内部表.外部表和分区表. 1.内部表,为托管表. 2.外部表,external. 3.分区表. 详解: 内部表,删除表的时候,数据会跟着删除. 外部表,在删除表的时候 ...
- thinkphp 邮件发送
最近项目上要求,要做个邮件发送的功能,因为用到的框架是ThinkPHP,于是就自己整理一下. 引入class.phpmailer.php,大家可以去这个链接去下载: http://pan.baidu. ...
- 读取url（1
就书本例子 import java.io.InputStream; import java.net.URL; public class Test { public static void main(S ...
- 在VC6中使用ogre进行游戏开发
微软公司开发的visual c++6.0堪称史上最易用.最成熟的开发工具.vc6以其小巧.轻便赢得了程序员的喜爱,以至于在VS大行其道的时代,很多程序员仍然使用vc6作为开发工具,vc6的欢迎性可见一 ...