【css--Form】字体为12px时表单中(radio,checkbox)与文字对齐

标签：

字体12px的对齐只是针对radio和checkbox

CSS:

<pre name="code" class="html">.form {font-size: 12px; line-height: 1.4}
.form .txt {width: 180px; height: 25px; padding:3px; border:1px solid #dbdbdb; line-height: 25px; color:#999; vertical-align: middle}
.form .txt:hover,
.form .txt:focus {border-color:#51b5f7; color:#333}
.form .btn {width: 78px; height: 33px; *margin-top: 1px; border:none; background-color: #31a5f7; border-radius: 3px; font-size: 15px; color:#fff; vertical-align: middle; transition:all .3s linear 0s}
.form .btn:hover {background-color: #51b5f7}
.form .radio {margin-top: -3px; *margin-top: 0; vertical-align: middle}
.form .chkbox {margin-top:1px; margin-top: -2px\9;  *margin-top:0px; vertical-align: middle;}

HTML:

<form action="#" class="form">
    <div>
        <input type="radio" value="0" name="media" class="radio">网络 <input type="radio" value="1" name="media" class="radio">电视 <input type="radio" value="2" name="media" class="radio">报纸
    </div>
    <div>
        <input type="checkbox" value="0" name="media" class="chkbox">网络 <input type="checkbox" value="1" name="media" class="chkbox">电视 <input type="checkbox" value="2" name="media" class="chkbox">报纸
    </div>
    <div>
        <input type="text" name="input" class="txt"> <input type="submit" name="btnSubmit" value="提交" class="btn">
    </div>
</form>

经测试，在IE,Firefox,chrome中基本都对齐的比较完美，safari中checkbox靠下了一个像素，不过也能将就看了

需要注意的是：文字行高设为1.4（不带单位）是最理想的（此时文字高度和radio,checkbox高度最接近），上下间距通过外层元素控制吧

下面是各浏览器预览效果图：

IE9/10与IE11有一点点差异，不过肉眼基本看不出来，就没单独截图了；另外，从图中可以看出，除IE之外的其它三个浏览器radio的宽度比checkbox多出1px

【css--Form】字体为12px时表单中(radio,checkbox)与文字对齐

标签：

原文地址：http://blog.csdn.net/jean_lee/article/details/43152329