为什么“计算”和“清除”按钮彼此重叠？

Question

“计算”和“清除”这两个按钮位于彼此的顶部，而不是彼此相邻。 这是针对基本计算器应用程序的（用户单击“计算”后解决方案显示在浅绿色的文本框中）。 “计算”和“清除”按钮均位于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;
}

然后在CSS中将div {margin-left：8em;}更改为div {margin-left：7.5em;}：

Answer 1

这是原因

input 
{
    margin-left: -5em;
    margin-bottom: .5em;
}

更改为

input:not([type='button']) 
{
    margin-left: -5em;
    margin-bottom: .5em;
}

为什么“计算”和“清除”按钮彼此重叠？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-02 23:25:56

为什么“计算”和“清除”按钮彼此重叠？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-02 23:25:56

解决方案1
1 已采纳 2015-10-02 23:25:56