CSS 文本域和按鈕對齊

，文字要包含在label標簽中，並設置行高，否則文字會與文本框的頂

端對齊。文本框要設置vertical-align:middle;否則文本框與button頂端對

齊。button中文字垂直居中，要設置高和行高，行高要小於高。

 

 

 

在不同瀏覽器中，CSS 文本域和按鈕對齊的表現不盡相同。

對 input 標記設定樣式，代碼如下：

//HTML 代碼
<form>
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交" />
</form>
//CSS 代碼
#textfield{border:1px solid #000;height:16px;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;}

文本域設置高度 16px，按鈕高度需要設置 20px。按照 IE 的標准正常對齊，但在 Firefox 中文本域和按鈕高度是錯開的。

此時通過對 input 標記設定左浮動 (float:left)，即可兼容 Firefox，CSS 代碼如下：

#textfield{border:1px solid #000;height:16px;float:left;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;float:left;}