表單元素與提示文字無(wú)法對(duì)齊的問(wèn)題

最近的項(xiàng)目涉及到很多表單的制作,特別是復(fù)選框(checkbox)和單選框(radio)。但是在前端開發(fā)過(guò)程中發(fā)現(xiàn),單(復(fù))選框和它們后面的提示文字在不進(jìn)行任何設(shè)置的情況下,是無(wú)法對(duì)齊的,而且在Firefox和IE中相差甚大。即使設(shè)置了vertical-align:middle,也依然不能完美對(duì)齊。如下圖所示:
于是上網(wǎng)查看了一些網(wǎng)站,發(fā)現(xiàn)這個(gè)問(wèn)題是普遍存在的,如下圖(FF3.5):
在很多網(wǎng)站涉及到表單的頁(yè)面中,都存在這種表單元素與提示文字無(wú)法對(duì)齊的問(wèn)題。于是打算研究一下這個(gè)問(wèn)題。首先,搜索到了wheatlee前輩的文章《大家都對(duì)vertical-align的各說(shuō)各話》。wheatlee在他的文章中關(guān)于垂直居中提到了這樣幾個(gè)關(guān)鍵點(diǎn):
1、vertical-align:middle的時(shí)候,是該元素的中心對(duì)齊周圍元素的中心。
2、這里“中心”的定義是:圖片當(dāng)然就是height的一半的位置,而文字應(yīng)該是基于baseline往上移動(dòng)0.5ex,亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個(gè)單位定義為0.5em,以至于其實(shí)不一定是x的正中心(baseline等名詞如果不懂,請(qǐng)先閱讀wheatlee的文章)
按照這個(gè)思路,對(duì)照我遇到的問(wèn)題,首先想到的是先驗(yàn)證一下瀏覽器對(duì)于“復(fù)選框”和圖片是不是使用同樣的規(guī)則來(lái)渲染(是不是把復(fù)選框當(dāng)成一個(gè)正方形圖片來(lái)對(duì)待)。于是寫出下面的代碼:
<style>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
測(cè)試文字
代碼中的testpic.gif是一個(gè)尺寸與復(fù)選框完全一樣的黑色圖片。FF3.5下顯示如下:
相關(guān)文章
- 為了使表單元素和文字都垂直居中對(duì)齊,當(dāng)文本框和下拉框都沒(méi)問(wèn)題,但是單選框和復(fù)選框就了,經(jīng)過(guò)反復(fù)測(cè)試終于完整搞定與大家分享,感興趣的各位可不要錯(cuò)過(guò)了哈2013-03-21
checkbox與文字混排無(wú)法對(duì)齊導(dǎo)致不美觀的解決方法
checkbox與文字不對(duì)齊會(huì)影響美觀本文將將介紹解決方法:需要checkbox居中對(duì)其 然后文字也要居中對(duì)齊,checkbox在FF和IE下表現(xiàn)不一樣;不管你怎么設(shè)置默認(rèn)的margin和padding2013-01-21HTML教程:圖片大小對(duì)齊間隔邊框?qū)傩孕薷姆椒ń榻B
修改圖片大小對(duì)齊間隔邊框?qū)傩?這些操作在開發(fā)過(guò)程中很常見(jiàn),也很實(shí)用,本文對(duì)此進(jìn)行詳細(xì)介紹下,感興趣的朋友可以了解下啊2013-01-20css 垂直對(duì)齊 css中vertical-align屬性(垂直對(duì)齊)的使用說(shuō)明
這兩天寫個(gè)頁(yè)面css的時(shí)候用到了vertical-align屬性,使用過(guò)程中踩到了坑,因此整理了一些,以備不時(shí)之需,感興趣的朋友可以了解下哦2013-01-09div中加入span右對(duì)齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對(duì)齊后,出現(xiàn)了換行問(wèn)題,一般思路的話一定是認(rèn)為通過(guò)分開兩列,一個(gè)align=left,另一個(gè)align=right;很是疑惑,于是利用閑暇時(shí)間,搜索整理下,曬出來(lái) 2012-12-19 css span右對(duì)齊 css li標(biāo)簽中span日期靠右布局實(shí)現(xiàn)代碼
在網(wǎng)頁(yè)布局中經(jīng)常會(huì)碰到新聞標(biāo)題靠左日期靠右,想要實(shí)現(xiàn)這種布局效果,需要在代碼上下點(diǎn)功夫,本人比較上心,也遇到此問(wèn)題,于是搜集整理一下,需要的朋友可以參考下2012-12-18怎樣對(duì)齊文本框和圖像(image)按鈕實(shí)現(xiàn)三點(diǎn)一線
一個(gè)文本框旁邊一個(gè)按鈕是很經(jīng)常用到的網(wǎng)頁(yè)內(nèi)容,比如搜索框等等,而如果旁邊的按鈕使用圖像的話,他們豎直方向就很不容易對(duì)齊,這一直是大家所頭疼的問(wèn)題,于是搜集整理一2012-12-11表單元素radio select對(duì)齊與IE6下雙邊距問(wèn)題解決方案
之前一直困擾自己的一個(gè)問(wèn)題就是表單內(nèi)radio、select等的對(duì)齊問(wèn)題,搞得自己相當(dāng)惱.今天終于花了些時(shí)間找到了好的解決方法.也希望能夠幫到跟我同樣聞form色變的人2012-12-07網(wǎng)頁(yè)中form表單的元素會(huì)出現(xiàn)一些問(wèn)題:比如文本域和按鈕對(duì)齊問(wèn)題,這個(gè)問(wèn)題會(huì)影響到界面的美觀度,本文將介紹如何解決此類問(wèn)題,需要了解的朋友可以參考下2012-11-30表單元素input、文字完美垂直居中對(duì)齊方法.2012-07-11最新評(píng)論
大家感興趣的內(nèi)容
- 1iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)
- 216進(jìn)制顏色代碼(完全)
- 340多個(gè)漂亮的網(wǎng)頁(yè)表單設(shè)計(jì)實(shí)例
- 4定義input type=file 樣式的方法
- 5HTML中讓表單input等文本框?yàn)橹蛔x不可編輯的方法
- 6html中設(shè)置錨點(diǎn)定位的幾種常見(jiàn)方法
- 7HTML 幾種特別分割線特效
- 8HTML iframe 用法總結(jié)收藏
- 9Html制作簡(jiǎn)單而漂亮的登錄頁(yè)面
- 10網(wǎng)頁(yè)嵌入百度地圖和使用百度地圖api自定義地圖的詳細(xì)
最近更新的內(nèi)容
- HTML 表格詳解(簡(jiǎn)單易懂較詳細(xì))
- 禁止HTML頁(yè)面滾動(dòng)的操作方法
- 使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例
- Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
- HTML文本域如何設(shè)置為禁止用戶手動(dòng)拖動(dòng)
- 如何通過(guò)HTML/CSS 實(shí)現(xiàn)各類進(jìn)度條的功能
- 靠我們自己的力量把IE6推向滅亡
- IE6 為什么最多人使用
- HTML中Canvas關(guān)鍵知識(shí)點(diǎn)總結(jié)
- html table+css實(shí)現(xiàn)可編輯表格的示例代碼