Heim >Web-Frontend >HTML-Tutorial >单选框和复选框与文本垂直对齐_html/css_WEB-ITnose
单选框和复选框与文本垂直对齐_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:301753Durchsuche
现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框与文本垂直居中对不齐，解决方法有很多，今天我整理了下最常用的 3 种方法。
html 结构：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>radio-and-checkbox-and-text-vertical-align</title> <link rel="stylesheet" href="css/main.css"/></head><body> <div class="demo"> <h2>单选框</h2> <p><input type="radio" name="radio" id="radio1" class="input1"/><label for="radio1">解决方法一</label></p> <p><input type="radio" name="radio" id="radio2" class="input2"/><label for="radio2">解决方法二</label></p> <p><input type="radio" name="radio" id="radio3" class="input3"/><label for="radio3">解决方法三</label></p> <h2>复选框</h2> <p><input type="checkbox" name="checkbox" id="checkbox1" class="input1"/><label for="checkbox1">解决方法一</label></p> <p><input type="checkbox" name="checkbox" id="checkbox2" class="input2"/><label for="checkbox2">解决方法二</label></p> <p><input type="checkbox" name="checkbox" id="checkbox3" class="input3"/><label for="checkbox3">解决方法三</label></p> </div></body></html>
scss：
@charset "utf-8";@import "core/config";@import "core/reset";.demo { margin:50px; font-size:12px; font-family:SimSun; h2 { font-size:20px; } p { margin:20px; input { margin-right:5px; } .input1 { height:13px; margin-top:0; vertical-align:text-top; } .input2 { margin-top:-2px; vertical-align:middle; } .input3 { vertical-align:-3px; } }} 效果如图所示：
测试浏览器：chrome，firefox，ie7-10
参考资料： 复选框单选框与文字对齐问题的研究与解决
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面_html/css_WEB-ITnoseNächster Artikel：撸个小站点(一) 需要做个图表展示_html/css_WEB-ITnose