如何更改按钮高度而不影响其他按钮?
问题描述:
想使类似下面的附加的图像计算器:如何更改按钮高度而不影响其他按钮?
但我无法对齐等于按钮正常。我怎样才能使它与图片中的按钮类似?
这里有一个片段:
#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>
答
试试这个:
#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;
}
你为什么标记引导?我看不到你用它。如果你是,我会建议使用行和列。这应该这样做我认为 – putvande
那么,如果浏览器的支持不是一个问题,你可以使用CSS网格。 [网格示例中的一些示例](https://gridbyexample.com/) –