Calculate 和 Clear 这两个按钮彼此重叠，而不是彼此相邻。这是一个基本的计算器应用程序(用户点击“计算”后，解决方案出现在浅绿色文本框中)。 Calculate 和 Clear 按钮都位于 div 标签内。这是完整的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
<script src="calculator.js"></script>
</head>
<body>
<section>
<h1>Calculator</h1>
<label> </label>
<input class="noLabel" type="text" id="sum" disabled="disabled">
<br>
<label>First Number:</label>
<input type="text" id="firstNumber">
<br>
<label>Second Number:</label>
<input type="text" id="secondNumber">
<br>
<div>
<input type="button" id="calc" value="Calculate">
<input type="button" id="clear" value="Clear">
</div>
</section>
</body>
</html>
如果我将它们放在两个单独的 div 标签中，它们将位于两个单独的行上，而不是并排放置。不确定我做错了什么。在此先感谢您的帮助。这是我的 CSS:
input {
margin-left: -5em;
margin-bottom: .5em;
}
label {
width: 11em;
float:left;
}
h1 {
color:black;
text-align:center;
}
section {
padding: 0 2em 1em;
border: grey solid;
background-color: #DCDCDC;
width: 350px;
}
div {
margin-left: 11em;
}
input.noLabel {
margin-left:11em;
background-color: Beige;
color: blue;
}
然后 div {margin-left:8em;} 到 CSS 中的 div {margin-left:7.5em;}:
最佳答案
这是原因
input
{
margin-left: -5em;
margin-bottom: .5em;
}
改成
input:not([type='button'])
{
margin-left: -5em;
margin-bottom: .5em;
}
关于javascript - 为什么计算和清除按钮在彼此之上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32917198/