Rumah > Artikel > hujung hadapan web > 单选框和复选框与文本垂直对齐_html/css_WEB-ITnose
单选框和复选框与文本垂直对齐_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:29:301697semak imbas
现在的网站一般字体大小都是 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
参考资料： 复选框单选框与文字对齐问题的研究与解决
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面_html/css_WEB-ITnoseArtikel seterusnya：撸个小站点(一) 需要做个图表展示_html/css_WEB-ITnose