复选框和文字对齐解决方案
Posted 显示有误
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复选框和文字对齐解决方案相关的知识，希望对你有一定的参考价值。
<!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" />单选框 <input type="checkbox" />复选框
<span class="zxx_exp">当文字14px左右大小时，对齐良好</span>
</div>
<div class="zxx_test_list" style="font-size:1em;">
<input type="radio" />单选框 <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" />单选框 <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" />单选框 <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" />单选框 <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" />单选框 <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" />单选框 <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>
以上是关于复选框和文字对齐解决方案的主要内容，如果未能解决你的问题，请参考以下文章