表單元素和文字垂直居中對齊問題解決整理

2024-07-11 08:33:59

字體：大中小

來源：轉載

供稿：網友

表單頁面，為了使表單元素和文字都垂直居中對齊，加個樣式input,select{vertical-align:middle}，文本框和下拉框都沒問題，但是單選框和復選框就杯具了。
大多表現：單選，復選和文字無間距，單選文字偏上，復選偏上。

關于這些問題網上有人發表了看法，用table搞定一切。這個也是一種方法，哥也不BS。
對于ie6,7下的文字間距問題，網上看到有人說設置width:14px就好了，我試了下發現width:13px更佳。這個問題解決。

對于文字偏上的問題，試了vertical-align下的所有屬性都不行。后來發現vertical-align是可以設置數值的，真是白混了這么久。
單選設置了vertical-align:-2px;復選設置vertical-align:-3px;就ok了。拿到ie6,7下測試，發現差了1px，使用了hack搞定。(ie6,7就是神奇)

完整代碼如下：

<!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=gb2312″ />
<title>表單頁面</title>
<style type=”text/css”>
<!–
body,ul,input,select{margin:0px;padding:0px;}
body{font-size:12px;}
ul{list-style:none;margin:20px auto;width:500px;}
ul li{height:30px;}
ul li input,ul li select{vertical-align:middle;}
.input{height:18px;line-height:18px;border:1px #999999 solid;}
.checkbox,.radio{*width:13px;}
.radio{vertical-align:-2px;*vertical-align:-1px;}
.checkbox{vertical-align:-3px;*vertical-align:-2px;}
–>
</style>
</head>
<body>
<ul>
<li>姓名：<input type=”text” class=”input” /></li>
<li>性別：<input type=”radio” name=”sex” class=”radio” value=”1″ />男 <input type=”radio” name=”sex” class=”radio” value=”2″ />女</li>
<li>年齡：<select name=”age” class=”select”>
<option value=””>請選擇</option>
<option>20以下</option>
<option>20-30</option>
<option>30-40</option>
<option>40以上</option>
</select></li>
<li>興趣：<input type=”checkbox” class=”checkbox” name=”interest” />上網 <input type=”checkbox” class=”checkbox” name=”interest” />音樂 <input type=”checkbox” class=”checkbox” name=”interest” />游戲 <input type=”checkbox” class=”checkbox” name=”interest” />電影 <input type=”checkbox” class=”checkbox” name=”interest” />其他</li>