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

最新推荐文章于 2023-12-05 09:56:41 发布

云端漂移

最新推荐文章于 2023-12-05 09:56:41 发布

阅读量1.1k

点赞数

分类专栏： css diary

本文链接：https://blog.csdn.net/jean_lee/article/details/43152329

版权

这篇博客介绍了如何在CSS中设置字体为12px时，确保radio和checkbox按钮与文字对齐。内容提到了在不同浏览器（IE, Firefox, Chrome, Safari）中的表现，并指出行高设为1.4可以达到最佳效果。在Safari中存在微小的对齐差异，但不影响整体效果。文章还附带了各浏览器的预览效果图。" 83342637,8089006,UFLDL教程：线性回归与梯度下降,"['机器学习', '线性代数', '优化算法']

摘要由CSDN通过智能技术生成

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