今天在项目中遇到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.其他方法

1)当文字12px左右大小时，单（复）选框设置height:13px; vertical-align:text-top; margin-top:0;效果如下：
单选框   复选框
2)当文字12px左右大小时，单（复）选框设置height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;效果如下：
单选框   复选框
3）当文字12px左右大小时，单（复）选框设置height:14px; vertical-align:top;样式后的表现，效果如下：
单选框   复选框 
4）当文字12px左右大小时，单（复）选框设置vertical-align:middle; margin-top:-2px; margin-bottom:1px;效果如下：
单选框   复选框 

radio 和checkbox与文字对齐问题的更多相关文章

  1. checkbox与文字对齐

    checkbox和后面的文字如果不加样式,会导致checkbox和文字对齐,解决办法是对checkbox和文字同时添加如下样式: vertical-align:middle;

  2. checkbox与文字对齐方式（同样可用于radio单选框）

    checkbox 在chrome 和 firefox中 间距是由margin撑开, IE中则是由padding,并且无法设置边框:   主要参考大神的博客,http://www.zhangxinxu. ...

  3. checkbox和文字对齐

    <style type="text/css"> input{vertical-align:middle; margin-top:0;} </style>

  4. checkbox/input文本框与文字对齐

    3种方法都能实现checkbox文本框或radio文本框与文字对齐: <meta charset="utf-8"> <input style="vert ...

  5. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  6. input框和文字对齐问题

    css样式解决! style="vertical-align: text-bottom;margin-bottom: 2px;"一.问题产生的条件对于14像素大小的字体是没有本篇所 ...

  7. 前端开发：css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

  8. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

  9. label按钮和文字对齐

    label按钮和文字对齐 做表单的时候,经常遇到:复选框和文字对不齐的情况 ========================== 下面方法可以对齐 <!--label [[--> < ...

随机推荐

  1. cocos2d-x项目过程记录(跨平台iOS和Android)

    (原创作品,欢迎转载,注明出处,谢谢:http://www.cnblogs.com/binxindoudou/admin/EditPosts.aspx?postid=3205249) 1.配置环境,重 ...

  2. 一行代码实现iOS序列化与反序列化

    一.变量声明 为便于下文讨论,提前创建父类Biology以及子类Person: Biology: @interface Biology : NSObject { NSInteger *_hairCou ...

  3. angular中ueditor插件的使用

    #在angularjs中使用ueditor编辑器需要注意事项: 在ui-view中使用放置ueditor的div,页面加载时编辑器在页面中是不显示的,需要通过指令手动replay 例: /** * u ...

  4. .Net程序员 Solr-5.3之旅 (一)Solr入门

    阅读目录 引言 Lunece是什么? Solr是什么 JAVA环境搭建 JAVA环境搭建之变量配置 Tomcat简单配置 结尾 引言 君子生非异也,善假于物也. Java和.Net哪个好,我们也不需要 ...

  5. Ajax请求传递参数遇到的问题

    想写个同类型的,代码未测. 什么是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:这么理解吧,WebAPI相当于Web MVC的后台部分. 接下来直接上 ...

  6. window.applicationCache事件，介绍

    1.关于applicationCache对象 在IE和Google中 为ApplicationCache对象 而在FF中为 OfflineResourceList对象 通过ApplicationCac ...

  7. HTML5 ArrayBuffer：类型化数组 （二）

    类型化数组是JavaScript操作二进制数据的一个接口. 这要从WebGL项目的诞生说起,所谓WebGL,就是指浏览器与显卡之间的通信接口,为了满足JavaScript与显卡之间大量的.实时的数据交 ...

  8. 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序(Oledb)

    转载:http://blog.csdn.net/lemontec/article/details/1754413 前几天用c#读 Excel 出现了如下问题未在本地计算机上注册“Microsoft.J ...

  9. tableView代理方法的调用时间，（主要是heightForRowAtIndexPath和cellForRowAtIndexPath调用时间）

    最近做一个demo,涉及按照数据分类然后依照分类在 cellForRowAtIndexPath形成不同类型的cell,就是有判断(在viewdidload里面做)和形成(在 cellForRowAtI ...

  10. app发布流程详解

    https://developer.apple.com 1. 点击 Member Center 2. 创建应用ID 3. 创建项目 4. 在AppStore创建对应的应用 5. 创建授权文件 6. 配 ...