Question

我想解决这个问题，但我不太清楚如何做到这一点。其他按钮需要调整，以便相等的按钮不会使它们看起来分裂。提前致谢！ misaligned calculator buttons

我的css：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

你可以浮动：右边的等于按钮。

您需要调整表单元素的宽度以使其保持对齐，我建议坚持使用全像素数量的边距等，因为并非所有浏览器都将部分像素视为相同。

此外，您可能会更改CSS以使跨距浮动，或者只是完全删除跨距。

Answer 2

这是更新的html

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

以下是plunkr

CSS - 不同大小的按钮对齐

2 个答案: