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 [[--> < ...
随机推荐
- codevs 1689 搭建高塔
/*机智sort二维转一维*/ #include<iostream> #include<cstdio> #include<cstring> #include< ...
- c# json数据解析——将字符串json格式数据转换成对象
网络中数据传输经常是xml或者json,现在做的一个项目之前调其他系统接口都是返回的xml格式,刚刚遇到一个返回json格式数据的接口,通过例子由易到难总结一下处理过程,希望能帮到和我一样开始不会的朋 ...
- 用angular来思考问题How do I “think in AngularJS” if I have a jQuery background?
[翻译]How do I “think in AngularJS” if I have a jQuery background? 1. 不要先设计页面,然后再使用DOM操作来改变它的展现 在jQuer ...
- 开源的Android开发框架-------PowerFramework使用心得(二)图片异步加载ImageTask
图片异步加载.可以备注图片是否缓存.缓存状态. 1.缓存-SD卡,路径可设置 2.图片压缩 3.可加载本地和网络图片 4.url为本地视频文件可以显示缩略图 5.中文url图片地址FileNotFou ...
- android studio主题设置-笔记3
主题背景设置(就是工具黑色背景还是白色背景),路径:File-Settings-Appearance
- TSQL Challenge 2
和之前发布的TSQL Challenge 1是同一系列的文章,看到那篇学习哪篇,没有固定的顺序,只为锻炼下思维. Compare rows in the same table and group th ...
- html5 高清屏幕图片处理
1. srcset 语法:在元素上添加srcset属性.srcset的值是一个用逗号分隔的列表.列表中的每个项包含一张图片的路径并且按倍数(例如,1x,2x,3x...)提供多张分辨率的图片 参考:h ...
- cxf客户端代码wsdlLocation设置相对路径
利用工生成的cxf客户端代码,wsdlLocation都是绝对路径,为了便于项目更加灵活管理,我们可以将该路径设置为相对路径: 1.下面图片是我的项目路径图片及wsdl地址存放路径: 2.下面图片是我 ...
- Java面试——基础
1,作用域,Java只有public,protect,private,默认是default相当于friendly 作用域 当前类 同一package 子类 其它 ...
- svn更新
下载配置文件 pwd cd /home/www/xxxx/protected/config/ get main.php 上传配置文件 put main.php svn更新 svn co svn://s ...