css input[radio][checkbox] 与文字对齐
2018-07-14 本文已影响0人
红尘耽搁的佛系少年
每次遇到 checkbox和文字对齐就要想半天。于是痛下决心，把它整理出来，希望以后不会再忘记。
其实主要是文本和check都设置同一个属性
vertical-align: middle;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li><label><input name="radio" type="radio"><span>佛系少年</span></label></li>
<li><label><input name="radio" type="radio"><span>红尘浪子</span></label></li>
</ul>
<ul>
<li><label><input type="checkbox"><span>美女</span></label></li>
<li><label><input type="checkbox"><span>美食</span></label></li>
</ul>
</body>
<style>
/** 加上这个属性就可以对齐了 **/
ul > li > label > input[type=radio], input[type=checkbox], span {
vertical-align: middle;
}
/** radio 有点皮，所以还要加这个 **/
ul > li > label > input[type=radio] {
margin-top: 2px;
}
/** 设置 radio,checkbox的大小 **/
input[type=radio], input[type=checkbox] {
width: 20px;
height: 20px;
}
/** ul的显示样式 */
ul > li {
list-style: none;
text-align: left;
font-size: 20px;
}
</style>
</html>
效果如下:
