如何更改按钮高度而不影响其他按钮？

Question

我试图制作一个类似于下图所附的计算器：

但我无法正确对齐等号按钮。如何使其与图像中的按钮相似？

这是一个片段：

＆＃13;

＆＃13;

#container
{
	text-align: center;
	margin: 200px auto;
}

button
{
	width: 30px;
	margin: 0 auto;
}

#clear, #zero
{
	width: 65px;
}

#equal
{
	height: 65px;
}

＆＃13;

	<div id="container">
		<div id="display">
		</div>
		<button id="clear">CLEAR</button>
		<button value="/">÷</button>
		<button value="*">x</button><br><br>
		<button value="7">7</button>
		<button value="">8</button>
		<button value="9">9</button>
		<button value="-">-</button><br><br>
		<button value="4">4</button>
		<button value="5">5</button>
		<button value="6">6</button>
		<button value="+">+</button><br><br>
		<button value="1">1</button>
		<button value="2">2</button>
		<button value="3">3</button><br><br>
		<button id="zero" value="0">0</button>
		<button value=".">.</button>
		<button id="equal" value="=">=</button>
	</div>

	<script type="text/javascript" src="Calculator.js"></script>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

#container
{
    text-align: center;
    margin-top: 200px;
}

button
{
    width: 30px;
}

#clear, #zero
{
    width: 65px;
}

#equal
{
  position: absolute;
  margin-left: 52px;
  margin-top: -72px;
  height: 72px;
}

#buttons
{
    display: inline-block;
}

#float
{
    float: left;
}