表單元素和文字垂直居中對齊問題解決整理
發(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就是神奇)
完整代碼如下：
<!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>
大多表現(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)文章
checkbox與文字混排無法對齊導(dǎo)致不美觀的解決方法
checkbox與文字不對齊會影響美觀本文將將介紹解決方法：需要checkbox居中對其 然后文字也要居中對齊，checkbox在FF和IE下表現(xiàn)不一樣;不管你怎么設(shè)置默認(rèn)的margin和padding2013-01-21- 修改圖片大小對齊間隔邊框?qū)傩?這些操作在開發(fā)過程中很常見，也很實(shí)用，本文對此進(jìn)行詳細(xì)介紹下，感興趣的朋友可以了解下啊2013-01-20
css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
這兩天寫個頁面css的時候用到了vertical-align屬性，使用過程中踩到了坑,因此整理了一些，以備不時之需，感興趣的朋友可以了解下哦2013-01-09div中加入span右對齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對齊后，出現(xiàn)了換行問題，一般思路的話一定是認(rèn)為通過分開兩列，一個align=left,另一個align=right；很是疑惑，于是利用閑暇時間，搜索整理下，曬出來 2012-12-19 css span右對齊 css li標(biāo)簽中span日期靠右布局實(shí)現(xiàn)代碼
在網(wǎng)頁布局中經(jīng)常會碰到新聞標(biāo)題靠左日期靠右，想要實(shí)現(xiàn)這種布局效果，需要在代碼上下點(diǎn)功夫，本人比較上心，也遇到此問題，于是搜集整理一下，需要的朋友可以參考下2012-12-18怎樣對齊文本框和圖像(image)按鈕實(shí)現(xiàn)三點(diǎn)一線
一個文本框旁邊一個按鈕是很經(jīng)常用到的網(wǎng)頁內(nèi)容，比如搜索框等等，而如果旁邊的按鈕使用圖像的話，他們豎直方向就很不容易對齊,這一直是大家所頭疼的問題，于是搜集整理一2012-12-11表單元素radio select對齊與IE6下雙邊距問題解決方案
之前一直困擾自己的一個問題就是表單內(nèi)radio、select等的對齊問題，搞得自己相當(dāng)惱.今天終于花了些時間找到了好的解決方法.也希望能夠幫到跟我同樣聞form色變的人2012-12-07網(wǎng)頁中form表單的元素會出現(xiàn)一些問題：比如文本域和按鈕對齊問題,這個問題會影響到界面的美觀度，本文將介紹如何解決此類問題，需要了解的朋友可以參考下2012-11-30表單元素input、文字完美垂直居中對齊方法.2012-07-11一做站的朋友問我為什么同時使用FLOAT:LEFT 和RIGHT的時候不在同一水平線上，二是在另一行，舉個例子，大家一看就明白了2010-11-02最新評論
大家感興趣的內(nèi)容
- 1HTML設(shè)置超鏈接字體顏色和點(diǎn)擊后的字體顏色
- 2div水平垂直居中的完美解決方案
- 3css設(shè)置各種中文字體如雅黑、黑體、宋體、楷體等等
- 4CSS 文本字體顏色設(shè)置方法(CSS color)
- 5CSS自定義select下拉選擇框的樣式(不用其他標(biāo)簽?zāi)M)
- 6CSS 漂亮搜索框美化代碼
- 7css 中的background:transparent到底是什么意思有什么
- 8CSS圓角效果 -webkit-border-radius(CSS3中border-rad
- 9CSS 首行縮進(jìn)兩個文字
- 10css textarea 高度自適應(yīng),無滾動條
最近更新的內(nèi)容
- CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階分享
- CSS3打造的現(xiàn)代交互式登錄界面詳細(xì)實(shí)現(xiàn)過程
- CSS普通流、浮動與定位網(wǎng)頁布局三大機(jī)制及最佳實(shí)踐
- css實(shí)現(xiàn)角標(biāo)效果并帶有文章或圖標(biāo)效果(完整代碼)
- CSS Anchor Positioning重新定義錨點(diǎn)定位的時代來臨(
- CSS中的Static、Relative、Absolute、Fixed、Sticky的
- CSS place-items: center解析與用法詳解
- CSS實(shí)現(xiàn)元素?fù)螡M剩余空間的五種方法
- CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
- CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
花莲市| 松潘县| 福贡县| 南雄市| 乌拉特前旗| 吉林市| 古浪县| 扎赉特旗| 天全县| 广西| 临高县| 会理县| 策勒县| 隆昌县| 陇川县| 涿州市| 额尔古纳市| 丹寨县| 元朗区| 镇雄县| 齐齐哈尔市| 宜宾县| 射洪县| 双桥区| 浦北县| 于都县| 岳普湖县| 南川市| 青海省| 湟源县| 顺昌县| 广灵县| 镇沅| 泽库县| 公安县| 日喀则市| 天津市| 上思县| 陵川县| 于都县| 绥宁县|