今天在项目中遇到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. 18、MySQL内存体系架构及参数总结

    内存结构: Mysql 内存分配规则是:用多少给多少,最高到配置的值,不是立即分配 图只做大概参考 全局缓存包括: global buffer(全局内存分配总和) =    innodb_buffer ...

  2. 学习《Spring 3.x 企业应用开发实战》Day-1

    Day-1 记录自己学习spring的笔记 提要:根据<Spring 3.x 企业应用开发实战>开头一个用户登录的例子,按照上面敲的. 1.项目分层

  3. Gson解析json数据(转)

    一. www.json.org这是JSON的官方网站. 首先,我,我们需要在code.google.com/p/google-gson/downloads/list下载JSON的jar包,解析后把gs ...

  4. vim 设定一个新的snippets

    目录 ~/.vim/bundle/vim-snippets/snippets 编辑 _.snippets 在最后添加一行自己需要的,比如想要个自己的名字,然后按tab,即出现全称,可以添加如下内容 s ...

  5. python之Lambda函数---笔记

    <Python3 程序开发指南> Lambda函数,是一个匿名函数,创建语法: lambda parameters:express parameters:可选,如果提供,通常是逗号分隔的变 ...

  6. ajax提交富文本，内容被截断，解决方法及思路

    问题描述: 使用百度的UEditor富文本插件用于前端富文本编辑,后端使用jsp,提交普通文本没有问题,后来发现在提交某些指定文本时,数据查回的数据出现不完整现象:第一件事就是想到“垃圾编辑器”

  7. request.getAttribute( "result");和request.setAttribute("result",username);

    request.setAttribute("result",username);在request对象中加入名为result的属性并附值为username,因为request对象是可 ...

  8. asp.net操作cookie类

    using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary ...

  9. vsftp 安装日志

    很早的一个日志了,从自家的QQ上,查看总不方便,搬家的. 安装完 centos后 安装vsftpd yum install vsftpd 安装伯克利数据库工具 yum install db4 db4- ...

  10. 【USACO 3.2.3】纺车的轮子

    [描述] 一架纺车有五个纺轮,这五个不透明的轮子边缘上都有一些缺口.这些缺口必须被迅速而准确地排列好.每个轮子都有一个起始标记(在0度),这样所有的轮子都可以在统一的已知位置开始转动.轮子按照角度变大 ...