Can someone please help me fix this issue? I'm having trouble getting the buttons to adjust properly so that they don't look misaligned after clicking the equal button. Thank you in advance! calculator button alignment problem
Snippet of my CSS:
body{
margin:0;
padding: 0;
}
form{
width:280px;
margin: auto;
}
button{
height: 40px;
width: 60px;
font-size: 1.5em;
background-color: #ddd;
border: none;
float:left;
margin: 2.3px;
}
button:hover{
background-color: #bbb;
}
button:active{
background-color:#aaa;
}
input{
height: 40px;
width: 246px;
font-size: 1.5em;
background-color: beige;
border: none;
padding-left: 10px;
}<!DOCTYPE html>
<html>
<head><title>JavaScript Calculator!</title></head>
<link rel="stylesheet" type="text/css" href="calccss.css">
<body>
<div >
<form name="calc">
<input class="inputc" type="text" name="panel" value="0" readonly="readonly"/>
<span><button type="button" onclick="onMouseClick()" value="C" name="c">C</button></span><span><button type="button" onclick="onMouseClick()" value="/" name="div">/</button></span><span><button type="button" value="X" onclick="onMouseClick()" name="x">X</button></span><span><button type="button" onclick="onMouseClick()" value="-" name="minus">-</button></span>
<span><button type="button" onclick="onMouseClick()" value="7" name="seven">7</button></span> <span><button type="button" onclick="onMouseClick()" value="8" name="eight">8</button></span><span><button type="button" value="9" onclick="onMouseClick()" name="nine">9</button></span><span><button type="button" onclick="onMouseClick()" value="+" name="plus">+</button></span>
<span><button type="button" onclick="onMouseClick()" value="4" name="four">4</button></span> <span><button type="button" onclick="onMouseClick()" value="5" name="five">5</button></span><span><button type="button" onclick="onMouseClick()" value="6" name="six">6</button></span><span><button type="button" style="height:128px" onclick="onMouseClick()" value="=" name="equals">=</button></span>
<span><button type="button" value="1" onclick="onMouseClick()" name="one">1</button></span> <span><button type="button" onclick="onMouseClick()" value="2" name="two">2</button></span><span><button type="button" onclick="onMouseClick()" value="3" name="three">3</button></span>
<span><button style ="width:125px" type="button" onclick="onMouseClick()" value="0" name="zero">0</button></span> <span><button type="button" onclick="onMouseClick()" value="coma" name="coma">,</button></span>
</form></div>
<script src="calcjs.js"></script>
</body>
</html>