复选框和文字对齐解决方案

<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>

<style type="text/css">
.zxx_exp{display:block; color:#34538b; margin-top:5px; margin-left:4px;}
.input_align_1{vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;}
.input_align_2{height:13px; vertical-align:text-top; margin-top:0;}
.input_align_3{height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;}
.input_align_4{height:14px; vertical-align:top;}
.input_align_5{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}
</style>
<body>
<div class="zxx_test_list">
<input type="radio" />单选框 &nbsp;&nbsp;<input type="checkbox" />复选框
<span class="zxx_exp">当文字14px左右大小时，对齐良好</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input type="radio" />单选框 &nbsp;&nbsp;<input type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，文字的位置就偏下了，火狐浏览器和谷歌浏览器下尤为明显</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_1" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_1" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;样式后的表现</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_2" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_2" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:13px; vertical-align:text-top; margin-top:0;样式后的表现</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_3" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_3" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;样式后的表现</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_4" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_4" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置height:14px; vertical-align:top;样式后的表现，chrome谷歌浏览器下文字稍微偏上</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input class="input_align_5" type="radio" />单选框 &nbsp;&nbsp;<input class="input_align_5" type="checkbox" />复选框
<span class="zxx_exp">当文字12px左右大小时，单（复）选框设置vertical-align:middle; margin-top:-2px; margin-bottom:1px;样式后的表现</span>
</div>
</body>
</html>

时间： 2024-10-10 10:22:01

复选框和文字对齐解决方案的相关文章

复选框与文字无法对齐问题

写过Web页面的朋友大概都曾遇到过这样的问题:checkbox与说明文字(比如一个label标签或一个a标签)无法对齐,要不是checkbox上浮了,要不是说明文字上浮. 以前遇到过这个问题,但是都直接忽视,并未深究.今天要解决项目中遗留下的界面显示问题,这个问题终于绕不过去了,因为它真的是无处不在. 今天,借助于伟大的baidu,同时自己不断试验,终于解决了这个"老大难"的"历史遗留问题".现将经验分享如下: 其实很简单,真的灰常简单,把要对齐的每个标签,都加一个

关于IE下复选框的样式问题

一.为什么复选框与后面的文字有间距 1.在FF,chrome,Safari等浏览器,是由margin引起的,也就是checkbox有默认margin-right:3px.(FF下复选框默认margin值为3px 3px 3px 4px,chrome与之一致 )2.IE6-IE8是由本身引起的. FF的虚框直接依附在复选框本身的边框上,IE6是偌大的区域,复选框只是位居其中,IE8下虚框的范围更加对称. 给复选框加border和background,IE6下如图,IE7类似,IE8更对称些,FF下

【转载】checkbox复选框的一些深入研究与理解

转载来自:原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌.我是不是应该着眼于眼前的东西,好好的静下心来,超过一般人的沉静与沉浸,研究最基本的东西呢?这番思考,让我找到了一些方向. 对于checkbox,从我开始接触HTML开始,陆陆续续也研究过好多次,然而多是零星的知识点的累加,或是掌握了些表象的东西,是否深入核心,是否深入其本质,是否有了完善的总结,是否

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

前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎中国首页单选框复选框与文字不对齐 这里,不是说,雅虎中

复选框、单选框与文字对齐问题

前言目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎中国首页单选框复选框与文字不对齐 这里,不是说,雅虎中国的团队不够认真,而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的.考虑到兼容性,控件本身的特殊性以及代码成本的控

复选框单选框与文字对齐问题的研究与解决

by zhangxinxu from http://www.zhangxinxu.com原文地址:http://www.zhangxinxu.com/wordpress/?p=56 前言目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎

控制a标签的链接效果+控制input复选框+选框文字

1.a:link{color:black;} 控制链接效果2.a:visited{color:red;} 控制鼠标点下时的效果3.a:hover{color:yellow;} 控制鼠标滑过的效果4.a;active{color:black;} 控制链接点过之后的效果5.cursor:pointer;     鼠标变手型 6.让选中的复选框变文字变红色让input的框自动获取焦点里面的文字变红色 input:focus{color:red;}input[type="checkbox"]:

复选框单选框与文字对齐问题解决

css代码如下: vertical-align:middle; margin-top:-2px; margin-bottom:1px; 原文链接:复选框单选框与文字对齐问题的研究与解决

点击文字选中单选框或复选框

在选择单选框或者复选框的时候,点击圆点或者方框不太好点,就有了点击文字选中的需求,之前一直想的是用js实现,后来发现一个比较方便的方法. 就是把选项和文字外加label标签,如: <label> <input type="radio" value="A" name="1">A.选项A </label> <label> <input type="radio" value=&q