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; margin-top：3px;それをちょっと整えて –

CSS - 異なるサイズのボタンのアライメント

答えて

関連する問題