我正在尝试使用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>
答案 0 :(得分:2)
text
和button
输入使用不同的盒子模型。按钮使用border-box
,因此边框实际上被视为盒子模型的一部分(即高度)。您可以通过更改其中一个模型来解决这个问题。也许在文本输入中添加box-sizing: border-box
(您还需要-moz-box-sizing
)。
答案 1 :(得分:2)
将此添加到:
#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
}