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

これを に追加:

#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 に答える
2

textbutton入力は別のボックス モデルを使用します。ボタンは を使用するborder-boxため、境界線は実際にはボックス モデル (高さ) の一部と見なされます。これは、モデルの 1 つを変更することで回避できます。おそらく、テキスト入力に追加box-sizing: border-boxします (これも必要になり-moz-box-sizingます)。

http://jsfiddle.net/xkmmP/

于 2013-02-20T01:53:53.047 に答える