无法更改输入的高度：type="submit" 按钮答案

【问题标题】：Unable to change height of input:type="submit" button无法更改输入的高度：type="submit" 按钮
【发布时间】：2016-01-23 18:12:54
【问题描述】：

代码：

<!DOCTYPE html>
<html>
<head>
<title>Set Alarm Clock</title>
<style type="text/css">
#container {
width: 600px;
height: 300px;
border: 1px solid black;
}
#hours, #minutes, #seconds {
width: 120px;
height: 80px;
}
#button {
width: 120px;
height: 80px;
}
</style>
</head>
<body>
<center>
<div id="container">
<h1>Set Alarm Clock</h1><br />
<label class="hours">
<input type="number" value="0" min="0" id="hours" />
</label>
<label class="minutes">
<input type="number" value="0" min="0" id="minutes" />
</label>
<label class="seconds">
<input type="number" value="0" min="0" id="seconds" />
</label>
<label>
<input type="submit" value="Set Alarm" id="button" />
</label>
</div>
</center>
</body>
</html>

我正在尝试使input:type="submit" 按钮与我创建的小时、分钟和秒框的标签高度相同。但是我只能改变按钮的宽度，而不是高度。如何使高度与标签完全相同？谢谢。

【问题讨论】：

标签： html css button height

【解决方案1】：

按钮默认包含内边距和边框属性。您只需将box-sizing: content-box; 添加到按钮即可。

#button {
width: 120px;
height: 80px;
box-sizing: content-box;
}

这里是fiddle

【讨论】：

【解决方案2】：

按钮高度应为 86px：

#button {
    width: 120px;
    height: 86px;
}

这是因为按钮的高度包括填充和边框。 86px 是按钮的整个高度。

【讨论】：

【解决方案3】：

请使用box-sizing 属性更新#button id。请点击here查看已解决的问题。

#button {
  width: 120px;
  height: 80px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

【讨论】：