Question

我正在尝试使用CSS将我的文本字段和按钮设置为相同的高度（40px）。

为什么文本字段和按钮的高度不同，即使它们都设置为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>

Answer 1

text和button输入使用不同的盒子模型。按钮使用border-box，因此边框实际上被视为盒子模型的一部分（即高度）。您可以通过更改其中一个模型来解决这个问题。也许在文本输入中添加box-sizing: border-box（您还需要-moz-box-sizing）。

http://jsfiddle.net/xkmmP/

Answer 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
}

Source

制作HTML文字字段＆amp;使用CSS按钮相同高度 - 不起作用

2 个答案: