2017-08-13 198 views
-1

想使類似下面的附加的圖像計算器:如何更改按鈕高度而不影響其他按鈕?

enter image description here

但我無法對齊等於按鈕正常。我怎樣才能使它與圖片中的按鈕類似?

這裏有一個片段:

#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>

+0

你爲什麼標記引導?我看不到你用它。如果你是,我會建議使用行和列。這應該這樣做我認爲 – putvande

+0

那麼,如果瀏覽器的支持不是一個問題,你可以使用CSS網格。 [網格示例中的一些示例](https://gridbyexample.com/) –

回答

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