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

-1

Я хотел бы исправить это, но я не совсем уверен, как это сделать. Остальные кнопки должны быть настроены так, чтобы кнопка равенства не заставляла их выглядеть разбитыми. Спасибо заранее! misaligned calculator buttons 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>

источник

2016-10-02 Giorgos Lamprakis

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

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

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

источник

2016-10-02 22:46:27 patrickhawley

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

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

Вот plunkr

источник

2016-10-02 22:56:45 GANI

Спасибо! Я добавил margin-right: 23px; Запас-топ: 3px; выровнять его немного лучше. –

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

ответ

Смежные вопросы