欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2013-03-21 14:40:39   作者：佚名   我要評論
為了使表單元素和文字都垂直居中對齊，當(dāng)文本框和下拉框都沒問題，但是單選框和復(fù)選框就了，經(jīng)過反復(fù)測試終于完整搞定與大家分享，感興趣的各位可不要錯過了哈
表單頁面，為了使表單元素和文字都垂直居中對齊，加個樣式input,select{vertical-align:middle}，文本框和下拉框都沒問題，但是單選框和復(fù)選框就杯具了。
大多表現(xiàn)：單選，復(fù)選和文字無間距，單選文字偏上，復(fù)選偏上。

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

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

完整代碼如下：

復(fù)制代碼
代碼如下:

<!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" />上網(wǎng) <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>
<li></li>
</ul>
</body>
</html>

相關(guān)文章

最新評論