CSS如何對(duì)齊文本框和其旁邊的圖像按鈕比如搜索框等等
發(fā)布時(shí)間：2014-04-15 16:46:29 作者：佚名 
我要評(píng)論
我要評(píng)論一個(gè)文本框旁邊一個(gè)按鈕是很經(jīng)常用到的網(wǎng)頁(yè)內(nèi)容，比如搜索框等等，如何使用css對(duì)齊文本框和旁邊的圖像按鈕，下面有個(gè)比較不錯(cuò)的解決方案，感興趣的朋友可以參考下
注：+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="foo" value="Test Field"/> <input type="image" src="images/button.gif" /></form>
其效果是：
解決方案非常簡(jiǎn)單，上述代碼修改為：
<form> <input type="text" name="foo" 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="foo" 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è)置就無效了；而對(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)一下。
一個(gè)文本框旁邊一個(gè)按鈕是很經(jīng)常用到的網(wǎng)頁(yè)內(nèi)容，比如搜索框等等，而如果旁邊的按鈕使用圖像的話，他們豎直方向就很不容易對(duì)齊，即使使用 vertical-align、padding和margin等都不行（特別是在IE中，F(xiàn)irefox中使用vertical-align還可以）。
例如有如下代碼：
復(fù)制代碼
代碼如下:<form> <input type="text" name="foo" value="Test Field"/> <input type="image" src="images/button.gif" /></form>
其效果是：
解決方案非常簡(jiǎn)單，上述代碼修改為：
復(fù)制代碼
代碼如下:<form> <input type="text" name="foo" 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)整：
復(fù)制代碼
代碼如下:<form> <input type="text" name="foo" 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è)置就無效了；而對(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)一下。
相關(guān)文章
這篇文章主要介紹了解決搜索框和搜索按鈕button邊框不能重合的問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-28
