[05] radio ,checkbox 表單文字對齊
阿新 • • 發佈：2017-09-28
radio ext1 情況 必須 依然 span ans 12px 復制代碼 
http://www.cnblogs.com/wangsir015/p/5555818.html
這幾天在做表單時總會碰到復選框(checkbox)和單選框(radio)與文字不對齊的問題，要不是checkbox上浮了，要不是文字上浮。在前端開發過程中，單(復)選框和它們後面的提示文字在不進行任何設置的情況下，是無法對齊的，而且在Firefox和IE中相差甚大。即使設置了vertical-align:middle，也依然不能完美對齊。
解決辦法：
1、文字大小必須是偶數，比如12PX。
2、將文字加上label標簽並且也添加vertical-align:middle樣式。
3、然後去除表單元素的邊距。
案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>測試vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>測試文字x</label>
<br/><br/>
<input class="inputcheckbox " name="test2" value="2" type="radio">
<label>測試文字x</label>
<br/><br/>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<br/><br/>
<label>測試文字</label>
<input class="inputcheckbox " name="Button1" type="button" value="按鈕" />
<br/><br/>
<select class="inputcheckbox " name="Select1">
<option>測試文字</option>
</select>
<label>測試文字</label>
</body>
</html>[05] radio ,checkbox 表單文字對齊