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

Question

想使类似下面的附加的图像计算器：

但我无法对齐等于按钮正常。我怎样才能使它与图片中的按钮类似？

这里有一个片段：

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

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

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

 
#equal 
 
{ 
 
\t height: 65px; 
 
}

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

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

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; 
}