<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>css-checkbox-radio-vertical-align</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> body{font:12px SimSun;} p{margin:30px 10px;} .wrapper{margin:50px auto;width:500px;} .input1{vertical-align:text-bottom; margin-bottom:-1px; *margin-bottom:-4px;} .input2{height:13px; vertical-align:text-top; margin-top:0;} .input3{height:15px; vertical-align:bottom; margin-bottom:-1px; margin-bottom:-2px/9; *margin-bottom:0px;} .input4{height:14px; vertical-align:top; margin-top:1px; margin-top:0/9;} .input5{vertical-align:middle; margin-top:-2px;} .input6{vertical-align:-3px;} </style></head><body> <div class="wrapper"> <form action="#" method="post"> <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> <p><input type="radio" name="radio" id="radio4" class="input4"/><label for="radio4">解決方法四</label></p> <p><input type="radio" name="radio" id="radio5" class="input5"/><label for="radio5">解決方法五</label></p> <p><input type="radio" name="radio" id="radio6" class="input6"/><label for="radio6">解決方法六</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> <p><input type="checkbox" name="checkbox" id="checkbox4" class="input4"/><label for="checkbox4">解決方法四</label></p> <p><input type="checkbox" name="checkbox" id="checkbox5" class="input5"/><label for="checkbox5">解決方法五</label></p> <p><input type="checkbox" name="checkbox" id="checkbox6" class="input6"/><label for="checkbox6">解決方法六</label></p> </form> </div></body></html>
瀏覽器兼容：chrome,firefox,ie8,ie7,ie6,safari
轉載地址：http://www.zhangxinxu.com/wordpress/?p=56
PS：個人推薦第2種，第5種和第6種方法。因為這3種方法都沒有用到 css hack。
新聞熱點
疑難解答
