今天在项目中遇到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. CKEditor＆ckfindtor

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的使用方法,如今把我的学习过程与大家分享一下. 谈起FCKedit ...

  2. linux 屏幕亮度调整命令

    我的Fujitsu S7211的笔记本屏幕显示在Ubuntu 10.04不如在Vista下明亮,一直以为是驱动的问题.后来从老外的博客中,发现了这个亮度其实可以调节. 2种方法: 1. 调节屏幕对比度 ...

  3. Ubuntu设置环境变量的几种方法

    1.Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1.1 永久的:需要修改配置文件,变量永久生效. 1.2 临时的:使用export命令声明即可,变量在关闭shell时失效 ...

  4. Android中强大的Matrix操作

    简介: Matrix翻译字面意思时矩阵,在Android的API中提供了两种Matrix,分别是android.graphics.Matrix 和 android.opengl.Matrix . 后者 ...

  5. Pyhton开发【第五篇】：Python基础之杂货铺

    Python开发[第五篇]:Python基础之杂货铺   字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进 ...

  6. IntentFilter

    当Intent在组件间传递时,组件如果想告知Android系统自己能够响应和处理哪些Intent,那么就需要用到IntentFilter对象. 顾名思义,IntentFilter对象负责过滤掉组件无法 ...

  7. IE8-下背景色半透明滤镜在jquery动画中失效问题记录

    前两天,UIer跟我说,把这些按钮都悬浮在这个图片上!我心中千万头草泥马奔过,图片各种各样.花花绿绿.五颜六色的,这几个按钮也没有多大的光环围绕,用户一眼看上去恐怕会以为这是图片的一部分吧!~~~我假 ...

  8. sql - 面试

    一,关于 group by 表内容: 2005-05-09 胜 2005-05-09 胜 2005-05-09 负 2005-05-09 负 2005-05-10 胜 2005-05-10 负 200 ...

  9. 【原】push过快的错误 （Pushing the same view controller instance more than once is not supported）

    今天在点击按钮push viewController 时,控制台报错: Terminating app due to uncaught exception 'NSInvalidArgumentExce ...

  10. 使用mailto在网页中链接Email地址

    <a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件.我们还可以利用mailto做许多其它事情.下面一一进行讲解,请看详细图示: 注意:如 ...