0

我正在尝试使用 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="&gt;">
</body>
</html>
4

2 回答 2

2

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

http://jsfiddle.net/xkmmP/

于 2013-02-20T01:53:53.047 回答
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
}

资源

于 2013-02-20T01:57:35.163 回答