亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS 文本域和按鈕對(duì)齊不一致解決方案

  發(fā)布時(shí)間:2012-11-30 17:26:37   作者:佚名   我要評(píng)論
網(wǎng)頁(yè)中form表單的元素會(huì)出現(xiàn)一些問題:比如文本域和按鈕對(duì)齊問題,這個(gè)問題會(huì)影響到界面的美觀度,本文將介紹如何解決此類問題,需要了解的朋友可以參考下

文字要包含在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ò)開的。

此時(shí)通過對(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)文章

最新評(píng)論