CSS 文本域和按鈕對(duì)齊不一致解決方案
發(fā)布時(shí)間:2012-11-30 17:26:37 作者:佚名
我要評(píng)論
網(wǎng)頁(yè)中form表單的元素會(huì)出現(xiàn)一些問(wèn)題:比如文本域和按鈕對(duì)齊問(wèn)題,這個(gè)問(wèn)題會(huì)影響到界面的美觀度,本文將介紹如何解決此類(lèi)問(wèn)題,需要了解的朋友可以參考下
文字要包含在label標(biāo)簽中,并設(shè)置行高,否則文字會(huì)與文本框的頂 端對(duì)齊。文本框要設(shè)置vertical-align:middle;否則文本框與button頂端對(duì)齊。button中文字垂直居中,要設(shè)置高和行高,行高要小于高。
對(duì)input標(biāo)記設(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 的標(biāo)準(zhǔn)正常對(duì)齊,但在 Firefox 中文本域和按鈕高度是錯(cuò)開(kāi)的。
此時(shí)通過(guò)對(duì) input 標(biāo)記設(shè)定左浮動(dòng) (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以更有針對(duì)性地控制瀏覽器表現(xiàn)。
相關(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ū)傩?這些操作在開(kāi)發(fā)過(guò)程中很常見(jiàn),也很實(shí)用,本文對(duì)此進(jìn)行詳細(xì)介紹下,感興趣的朋友可以了解下啊2013-01-20css 垂直對(duì)齊 css中vertical-align屬性(垂直對(duì)齊)的使用說(shuō)明
這兩天寫(xiě)個(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ò)分開(kāi)兩列,一個(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表單元素input、文字完美垂直居中對(duì)齊方法.2012-07-11CSS中右對(duì)齊float:right換行的解決辦法
一做站的朋友問(wèn)我為什么同時(shí)使用FLOAT:LEFT 和RIGHT的時(shí)候不在同一水平線上,二是在另一行,舉個(gè)例子,大家一看就明白了2010-11-02最新評(píng)論
文章分類(lèi)
大家感興趣的內(nèi)容
- 1HTML設(shè)置超鏈接字體顏色和點(diǎn)擊后的字體顏色
- 2div水平垂直居中的完美解決方案
- 3css設(shè)置各種中文字體如雅黑、黑體、宋體、楷體等等
- 4CSS 文本字體顏色設(shè)置方法(CSS color)
- 5CSS自定義select下拉選擇框的樣式(不用其他標(biāo)簽?zāi)M)
- 6CSS 漂亮搜索框美化代碼
- 7css 中的background:transparent到底是什么意思有什么
- 8CSS圓角效果 -webkit-border-radius(CSS3中border-rad
- 9CSS 首行縮進(jìn)兩個(gè)文字
- 10css textarea 高度自適應(yīng),無(wú)滾動(dòng)條
最近更新的內(nèi)容
- CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階分享
- CSS3打造的現(xiàn)代交互式登錄界面詳細(xì)實(shí)現(xiàn)過(guò)程
- CSS普通流、浮動(dòng)與定位網(wǎng)頁(yè)布局三大機(jī)制及最佳實(shí)踐
- css實(shí)現(xiàn)角標(biāo)效果并帶有文章或圖標(biāo)效果(完整代碼)
- CSS Anchor Positioning重新定義錨點(diǎn)定位的時(shí)代來(lái)臨(
- CSS中的Static、Relative、Absolute、Fixed、Sticky的
- CSS place-items: center解析與用法詳解
- CSS實(shí)現(xiàn)元素?fù)螡M剩余空間的五種方法
- CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
- CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
右玉县| 建阳市| 宜章县| 龙井市| 收藏| 山西省| 峨山| 张北县| 依安县| 噶尔县| 准格尔旗| 枣庄市| 雅安市| 永吉县| 宝清县| 华阴市| 蒙自县| 横峰县| 新河县| 崇礼县| 通化市| 福安市| 崇义县| 临城县| 大冶市| 南陵县| 三原县| 淮北市| 武平县| 寻乌县| 金山区| 通州市| 克拉玛依市| 三都| 开封县| 吕梁市| 兴安县| 余庆县| 恩施市| 营口市| 仙桃市|

