您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

CSS如何對(duì)齊文本框和其旁邊的圖像按鈕比如搜索框

+margin-top:1px這里也不是絕對(duì)的,如果左邊的輸入框設(shè)置了padding或者margin的話,右邊圖片的+margin-top就要相應(yīng)修改了。所以還是要自己調(diào)試的。 

一 個(gè)文本框旁邊一個(gè)按鈕是很經(jīng)常用到的網(wǎng)頁(yè)內(nèi)容,比如搜索框等等,而如果旁邊的按鈕使用圖像的話,他們豎直方向就很不容易對(duì)齊,即使使用 vertical-align、padding和margin等都不行(特別是在IE中,F(xiàn)irefox中使用vertical-align還可以)。

例如有如下代碼:
 
代碼如下:

<form> <input type="text" name="tuquu" value="Test Field"/> <input type="image" src="images/button.gif" /></form>

其效果是:

解決方案非常簡(jiǎn)單,上述代碼修改為:
 
代碼如下:

<form> <input type="text" name="tuquu" value="Test Field"/> <input type="image" src="images/button.gif" style="position:absolute" /></form>

這時(shí),在Firefox和IE中的效果分別是:

css如何對(duì)齊文本框和旁邊的圖像按鈕 - Awei - 半調(diào)子程序員 css如何對(duì)齊文本框和旁邊的圖像按鈕 - Awei - 半調(diào)子程序員

可以看到,在Firefox中,如果事先做好的圖像和文本框的高度完全一致,那么他們就會(huì)完全對(duì)齊了;而在IE中,則按鈕圖像比文本框高一個(gè)像素。

因此可以針對(duì)IE瀏覽器稍作調(diào)整:
 
代碼如下:

<form> <input type="text" name="tuquu" value="Test Field"/> <input type="image" src="images/button.gif" style="position:absolute;+margin-top:1px" /></form>

注意,這里在”margin-top”屬性前面有一個(gè)加號(hào),對(duì)于Firefox瀏覽器,這個(gè)屬性設(shè)置就無(wú)效了;而對(duì)于IE瀏覽器,會(huì)忽略掉這個(gè)加號(hào),因此針對(duì)IE瀏覽器,上面就會(huì)存在這1像素的margin了。在這時(shí),在Firefox和IE中的效果分別是:

css如何對(duì)齊文本框和旁邊的圖像按鈕 - Awei - 半調(diào)子程序員 css如何對(duì)齊文本框和旁邊的圖像按鈕 - Awei - 半調(diào)子程序員

到這里,在豎直方向經(jīng)對(duì)齊得很好了,水平方向上,在Firefox和IE中,還略有區(qū)別,在Firefox中二者緊靠在一起,在IE中,二者之間有一點(diǎn)點(diǎn)間隔。但是水平方向的控制就容易多了,這里就不再細(xì)調(diào)整了,讀者可以自己試驗(yàn)一下。
[教程作者:未知]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd2612.html
設(shè)計(jì)師們代碼指南之定位與布局
hideFocus(虛線框處理小技巧)
圖趣網(wǎng)微信
建議反饋
×