CSS 文本域和按鈕對齊不一致解決方案
發(fā)布時間:2012-11-30 17:26:37 作者:佚名
我要評論
網(wǎng)頁中form表單的元素會出現(xiàn)一些問題:比如文本域和按鈕對齊問題,這個問題會影響到界面的美觀度,本文將介紹如何解決此類問題,需要了解的朋友可以參考下
文字要包含在label標簽中,并設(shè)置行高,否則文字會與文本框的頂 端對齊。文本框要設(shè)置vertical-align:middle;否則文本框與button頂端對齊。button中文字垂直居中,要設(shè)置高和行高,行高要小于高。
對input標記設(shè)定樣式,代碼如下:
//HTML 代碼
復(fù)制代碼
代碼如下:<form> <input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交" />
</form>
//CSS 代碼
復(fù)制代碼
代碼如下:#textfield{border:1px solid #000;height:16px;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;}
文本域設(shè)置高度 16px,按鈕高度需要設(shè)置 20px。按照 IE 的標準正常對齊,但在 Firefox 中文本域和按鈕高度是錯開的。
此時通過對 input 標記設(shè)定左浮動 (float:left),即可兼容 Firefox,CSS 代碼如下:
復(fù)制代碼
代碼如下:#textfield{border:1px solid #000;height:16px;float:left;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;float:left;}
當(dāng)然,可以使用CSS Hack以更有針對性地控制瀏覽器表現(xiàn)。
相關(guān)文章
- 為了使表單元素和文字都垂直居中對齊,當(dāng)文本框和下拉框都沒問題,但是單選框和復(fù)選框就了,經(jīng)過反復(fù)測試終于完整搞定與大家分享,感興趣的各位可不要錯過了哈2013-03-21
checkbox與文字混排無法對齊導(dǎo)致不美觀的解決方法
checkbox與文字不對齊會影響美觀本文將將介紹解決方法:需要checkbox居中對其 然后文字也要居中對齊,checkbox在FF和IE下表現(xiàn)不一樣;不管你怎么設(shè)置默認的margin和padding2013-01-21- 修改圖片大小對齊間隔邊框?qū)傩?這些操作在開發(fā)過程中很常見,也很實用,本文對此進行詳細介紹下,感興趣的朋友可以了解下啊2013-01-20
css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
這兩天寫個頁面css的時候用到了vertical-align屬性,使用過程中踩到了坑,因此整理了一些,以備不時之需,感興趣的朋友可以了解下哦2013-01-09div中加入span右對齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對齊后,出現(xiàn)了換行問題,一般思路的話一定是認為通過分開兩列,一個align=left,另一個align=right;很是疑惑,于是利用閑暇時間,搜索整理下,曬出來 2012-12-19 css span右對齊 css li標簽中span日期靠右布局實現(xiàn)代碼
在網(wǎng)頁布局中經(jīng)常會碰到新聞標題靠左日期靠右,想要實現(xiàn)這種布局效果,需要在代碼上下點功夫,本人比較上心,也遇到此問題,于是搜集整理一下,需要的朋友可以參考下2012-12-18怎樣對齊文本框和圖像(image)按鈕實現(xiàn)三點一線
一個文本框旁邊一個按鈕是很經(jīng)常用到的網(wǎng)頁內(nèi)容,比如搜索框等等,而如果旁邊的按鈕使用圖像的話,他們豎直方向就很不容易對齊,這一直是大家所頭疼的問題,于是搜集整理一2012-12-11表單元素radio select對齊與IE6下雙邊距問題解決方案
之前一直困擾自己的一個問題就是表單內(nèi)radio、select等的對齊問題,搞得自己相當(dāng)惱.今天終于花了些時間找到了好的解決方法.也希望能夠幫到跟我同樣聞form色變的人2012-12-07表單元素input、文字完美垂直居中對齊方法.2012-07-11一做站的朋友問我為什么同時使用FLOAT:LEFT 和RIGHT的時候不在同一水平線上,二是在另一行,舉個例子,大家一看就明白了2010-11-02最新評論
大家感興趣的內(nèi)容
最近更新的內(nèi)容
- CSS背景色鏤空技術(shù)實際應(yīng)用及進階分享
- CSS3打造的現(xiàn)代交互式登錄界面詳細實現(xiàn)過程
- CSS普通流、浮動與定位網(wǎng)頁布局三大機制及最佳實踐
- css實現(xiàn)角標效果并帶有文章或圖標效果(完整代碼)
- CSS Anchor Positioning重新定義錨點定位的時代來臨(
- CSS中的Static、Relative、Absolute、Fixed、Sticky的
- CSS place-items: center解析與用法詳解
- CSS實現(xiàn)元素撐滿剩余空間的五種方法
- CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
- CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
杭州市| 通城县| 扶绥县| 海兴县| 丰台区| 农安县| 濮阳县| 眉山市| 文登市| 海南省| 原阳县| 乡城县| 德惠市| 禄丰县| 呼和浩特市| 林周县| 长子县| 新营市| 全南县| 黄平县| 清新县| 大庆市| 扶风县| 克拉玛依市| 晋州市| 突泉县| 商河县| 胶州市| 海阳市| 上犹县| 长沙县| 乐东| 沙坪坝区| 兰溪市| 宁阳县| 牡丹江市| 紫金县| 大化| 通化市| 通河县| 乌鲁木齐市|

