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

来源：互联网发布：淘宝助手有什么用处编辑：程序博客网时间：2024/05/21 08:41

字体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

0 0