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

时间:2013-02-20 01:51:25

标签: html css css3

我正在尝试使用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>

2 个答案:

答案 0 :(得分:2)

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

http://jsfiddle.net/xkmmP/

答案 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
}

Source