CSS - выравнивание кнопок разного размера

#css

Вопрос:

Я хотел бы это исправить, но я не совсем уверен, как это сделать. Другие кнопки необходимо настроить так, чтобы кнопка «Равно» не заставляла их выглядеть разделенными. Заранее спасибо! смещенные кнопки калькулятора

Мой 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>

Ответ №1:

Вы могли бы всплывать: правая кнопка равна.

Вам нужно будет настроить ширину элемента формы, чтобы он был выровнен, и я бы рекомендовал придерживаться значений полей в полных пикселях и т. Д., Поскольку не все браузеры обрабатывают частичные пиксели одинаково.

Кроме того, вы можете изменить CSS таким образом, чтобы интервалы перемещались, или просто полностью удалить интервалы.

Ответ №2:

Вот обновленный html

 <span><button type="button" style="height:128px;float:right;" onclick="onMouseClick()" value="=" name="equals">=</button></span>

Вот plunkr