使HTML文本字段和按鈕與CSS保持相同高度 - 不工作

我正在嘗試使CSS和CSS文本字段和按鈕具有相同的高度（40px）。使HTML文本字段和按鈕與CSS保持相同高度 - 不工作

爲什麼文本字段和按鈕高度不同，即使它們都設置爲40px？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style> 
#textQuizFillBlankUserAnswer { 
    border: 2px solid #000; 
    font-size: 16px; 
    font-weight: bold; 
    width: 50%; 
    height: 40px; 
    float: left; 
} 
#buttonQuizFillBlankSubmit { 
    border: 2px solid #000; 
    font-size: 20px; 
    font-weight: bold; 
    width: 20%; 
    height: 40px; 
    float: left; 
    margin-left: 5px; 
} 
</style> 
</head> 

<body> 
<input type="text" id="textQuizFillBlankUserAnswer"> 
<input type="button" id="buttonQuizFillBlankSubmit" value="&gt;"> 
</body> 
</html>

來源

2013-02-20 user1822824

textbutton和輸入使用不同的盒模型。按鈕使用border-box，所以邊框實際上被認爲是盒子模型的一部分（即高度）。您可以通過更改其中一個模型來解決此問題。也許在文本輸入中添加box-sizing: border-box（您也需要-moz-box-sizing）。

http://jsfiddle.net/xkmmP/

來源

2013-02-20 01:53:53

它添加到：

#textQuizFillBlankUserAnswer { 
    border: 2px solid #000; 
    font-size: 16px; 
    font-weight: bold; 
    width: 50%; 
    height: 40px; 
    float: left; 
    box-sizing: border-box; // This line 
    vertical-align: middle; // and this line 
}

Source

來源

2013-02-20 01:57:35

使HTML文本字段和按鈕與CSS保持相同高度 - 不工作

回答

相關問題