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 - 다른 크기 버튼 맞춤

답변

관련 문제