我正在尝试使用 CSS 使我的文本字段和按钮具有相同的高度 (40px)。
为什么文本字段和按钮的高度不同，即使它们都设置为 40px？
我的代码如下:http://jsfiddle.net/xkmmP/
<!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=">">
</body>
</html>
最佳答案
text 和 button 输入使用不同的盒子模型。该按钮使用 border-box，因此边框实际上被认为是框模型的一部分(即高度)。您可以通过更改其中一个模型来解决这个问题。或许将 box-sizing: border-box 添加到文本输入中(您也需要 -moz-box-sizing)。
关于html - 使用 CSS 使 HTML 文本字段和按钮具有相同的高度 - 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14970983/