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 - 不同尺寸的按钮对齐

回答

相关问题