CSS怎么對齊文本框

本篇內容主要講解“CSS怎么對齊文本框”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS怎么對齊文本框”吧!

崇禮網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,崇禮網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為崇禮上千家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的崇禮做網(wǎng)站的公司定做！

注：+margin-top:1px這里也不是絕對的，如果左邊的輸入框設置了padding或者margin的話，右邊圖片的+margin-top就要相應修改了。所以還是要自己調試的。 

一個文本框旁邊一個按鈕是很經(jīng)常用到的網(wǎng)頁內容，比如搜索框等等，而如果旁邊的按鈕使用圖像的話，他們豎直方向就很不容易對齊，即使使用 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>

其效果是：

解決方案非常簡單，上述代碼修改為：

代碼如下:

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

這時，在Firefox和IE中的效果分別是：

css如何對齊文本框和旁邊的圖像按鈕 - Awei - 半調子程序員 css如何對齊文本框和旁邊的圖像按鈕 - Awei - 半調子程序員

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

因此可以針對IE瀏覽器稍作調整：

代碼如下:

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

注意，這里在”margin-top”屬性前面有一個加號，對于Firefox瀏覽器，這個屬性設置就無效了；而對于IE瀏覽器，會忽略掉這個加號，因此針對IE瀏覽器，上面就會存在這1像素的margin了。在這時，在Firefox和IE中的效果分別是：

css如何對齊文本框和旁邊的圖像按鈕 - Awei - 半調子程序員 css如何對齊文本框和旁邊的圖像按鈕 - Awei - 半調子程序員

到這里，在豎直方向經(jīng)對齊得很好了，水平方向上，在Firefox和IE中，還略有區(qū)別，在Firefox中二者緊靠在一起，在IE中，二者之間有一點點間隔。但是水平方向的控制就容易多了，這里就不再細調整了，讀者可以自己試驗一下。

到此，相信大家對“CSS怎么對齊文本框”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

分享文章：CSS怎么對齊文本框
文章出自：http://m.kartarina.com/article42/geceec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)頁設計公司、網(wǎng)站策劃、App設計、網(wǎng)站營銷、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)