计算器页面显示按钮不对齐，+和+/-按钮突然变大

首页课程实战体系课手记专栏慕课教程

来源：2-4 计算器0-9数字显示代码优化（上）

玖__

2020-10-14 21:35:45

具体遇到的问题

计算器页面显示按钮不对齐，+和+/-按钮变大

报错信息的截图

尝试过的解决思路和结果

在css里的input[type=“button”]里加了这俩个
margin:2px;
height:20px;
显示结果为图二

粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码
indext.htmll文件：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="calc.css">
    <script type="text/javascript" src="calc.js"></script>
</head>
<body onload="init()">
    <div id="div1">
        <div id="div2">
            <input type="text" name="num" id="num" />
        </div>
        <div id="div3">
            <input type="button" value="C" name="" id="" />
            <input type="button" value="m" name="" id="" />
            <input type="button" value="←" name="" id="" />
            <input type="button" value="÷" name="" id="" />
            <input type="button" value="7" name="" id="" />
            <input type="button" value="8" name="" id="" />
            <input type="button" value="9" name="" id="" />
            <input type="button" value="×" name="" id="" />
            <input type="button" value="4" name="" id="" />
            <input type="button" value="5" name="" id="" />
            <input type="button" value="6" name="" id="" />
            <input type="button" value="-" name="" id="" />
            <input type="button" value="1" name="" id="" />
            <input type="button" value="2" name="" id="" />
            <input type="button" value="3" name="" id="" />
            <input type="button" value="＋" name="" id="" />
            <input type="button" value="＋/-" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="." name="" id="" />
            <input type="button" value="=" name="" id="" />
        </div>
    </div>

</body>
</html>


cals.js文件：
function init(){
    var num=document.getElementById("num");
    num.value=0;
    num.disabled="disabled";
    var oButton=document.getElementsByTagName("input");
    for(var i=0;i<oButton.length;i++){
        oButton[i].onclick=function(){
            alert(this.value);
        }
    }
}


cals.css文件：
*{
    margin:0px;
    padding:0px;
}
div{
    width:170px;
}
#div1{
    top:60px;
    left:200px;
    position:absolute;
}
input[type="button"]{
    width:30px;
    margin-right:5px;

}
input[type="text"]{
    width:150px;
    text-align:right;
    background-color:#ffffff;
    border:1px solid;
}

写回答

1回答