使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保持相同高度 - 不工作

回答

相关问题