在进行div+css布局的过程中，很多同学发现表单单选框与复选框不能跟文本对齐，下面青岛星网跟大家分享：div+CSS实现单选复选框与文本对齐的方法。
<div style="margin-bottom:1em;line-height:18px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:18px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:18px;</div>
</div>
<div style="margin-bottom:1em;line-height:20px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:20px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:20px;</div>
</div>
<div style="margin-bottom:1em;line-height:30px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:30px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:18px;">
<div style="background:#dfedf0;height:30px;"><input type="radio">单选框line-height:18px;height:30px;</div>
<div style="background:#ddd;height:30px;"><input type="checkbox">复选框line-height:18px;height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:20px;">
<div style="background:#dfedf0;height:30px;"><input type="radio">单选框line-height:20px;height:30px;</div>
<div style="background:#ddd;height:30px;"><input type="checkbox">复选框line-height:20px;height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:30px;">
<div style="background:#dfedf0;height:30px;"><input type="radio">单选框line-height:30px;height:30px;</div>
<div style="background:#ddd;height:30px;"><input type="checkbox">复选框line-height:30px;height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:18px;font-size:14px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:18px;font-size:14px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:18px;font-size:14px;;</div>
</div>
<div style="margin-bottom:1em;line-height:20px;font-size:16px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:20px;font-size:16px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:20px;font-size:16px;</div>
</div>
<div style="margin-bottom:1em;line-height:30px;font-size:16px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:30px;font-size:16px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:30px;font-size:16px;</div>
</div> /* 预览辅助样式 */
body{margin:20px;}
/* 选框与文本对齐 */
input{position:relative;*top:1px;margin:0 4px 0 0;*margin:0 0 0 -4px;}
在线QQ：
