Question

代码：

<!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"按钮与我创建的小时，分钟和秒框的标签高度相同。但是我只能改变按钮的宽度，而不是高度。如何使高度与标签完全相同？感谢。

Answer 1

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

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

以下是fiddle

Answer 2

按钮应为86px高度：

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

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

Answer 3

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

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

无法更改输入的高度：type =“submit”按钮

3 个答案: