如何解决我的 HTML、CSS、JS 计算器的按钮有各种尺寸

介绍

你好！我对一般的编码和使用 Stackoverflow、GitHub 等平台还是很陌生，所以如果我在这篇文章中也做错了什么，我提前道歉。

这也是我的第一篇文章，所以请让我知道要进行的任何更正，以便我知道将来如何制作更连贯的帖子。

问题

我已经在网上学习了 HTML、CSS 和 JS 计算器教程，并完成了完全相同的步骤，但是，当我运行代码时，我的按钮出现了不同的大小，如下图所示： image of the buttons in different sizes

我不确定如何查明我的错误。

这是我遇到这个错误之前的代码：

function insert(num) {
  document.form.textview.value = document.form.textview.value + num
}

* {
  margin: 0;
  padding: 0;
}

.button {
  width: 50;
  height: 50;
  font-size: 25;
  margin: 2;
  cursor: pointer;
}

.textview {
  width: 217;
  margin: 5;
  font-size: 25;
  padding: 5;
}

<html>

<head>
</head>

<body>
  <div class="main">
    <form name="form">
      <input class="textview" name="textview">
      <table>
        <tr>
          <td><input type="button" value="C"></td>
          <td><input type="button" value="<"></td>
          <td><input type="button" value="/"></td>
          <td><input type="button" value="x"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="7"></td>
          <td><input class="button" type="button" value="8"></td>
          <td><input class="button" type="button" value="9"></td>
          <td><input class="button" type="button" value="-"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="4"></td>
          <td><input type="button" value="5"></td>
          <td><input type="button" value="6"></td>
          <td><input type="button" value="+"></td>
        </tr>
        <tr>
          <td><input type="button" value="1" onclick="insert(1)"></td>
          <td><input type="button" value="2"></td>
          <td><input type="button" value="3"></td>
          <td><input type="button" value="+"></td>
        </tr>
      </table>
    </form>
  </div>
</body>

</html>

问题可能出在样式元素内吗？

谢谢！

解决方法

        function insert(num){
            document.form.textview.value=document.form.textview.value+num
        }

<style>
*{
margin:0px;
padding: 0px;
}

.button{
    width:50px;
    height: 50px; 
    font-size: 25px;
    margin: 2px;
    cursor: pointer;
}
.textview{
    width: 217px; 
    margin: 5px;
    font-size: 25px;
    padding: 5px; 
}
</style>
<body>
    <div class="main">
        <form name="form">
            <input class="textview" name="textview">
            <table>
               <tr>
                   <td><input class="button" type="button" value="C"></td>
                   <td><input class="button" type="button" value="<"></td>
                   <td><input class="button" type="button" value="/"></td>
                   <td><input class="button" type="button" value="x"></td>
               </tr>
                <tr>
                    <td><input class="button" type="button" value="7"></td>
                    <td><input class="button" type="button" value="8"></td>
                    <td><input class="button" type="button" value="9"></td>
                    <td><input class="button" type="button" value="-"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="4"></td>
                    <td><input class="button" type="button" value="5"></td>
                    <td><input class="button" type="button" value="6"></td>
                    <td><input class="button" type="button" value="+"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
                    <td><input class="button" type="button" value="2"></td>
                    <td><input class="button" type="button" value="3"></td>
                    <td><input class="button" type="button" value="+"></td>
                </tr>
            </table>
        </form>
    </div>
</body>

我发现你的 input 标签有错字错误，你必须在你写了“type”的地方写上“class”，为了更好地理解，请参见下文。

function u() {

        if (n.model.alias == "group") {
            var selectedGroup = document.getElementById("group").value;
            var subs = angular.element(document.getElementById('subGroup')).scope();

            $.ajax({
                url: "/umbraco/Api/ContentmentCustomApi/GetSubGroups",type: "GET",cache: false,async: false,data: { selectedGroup: selectedGroup }
            }).then(function (data) {
                subs.vm.items = data;
                subs.$apply();
            }); 
        };

更改为：

<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="+"></td>

您的某些 <input> 元素没有 class="button" 和 type="button"。

您需要两者 - type 属性将输入类型设置为按钮（或者它将是一个文本框），以及相应 CSS 的 class 属性样式。

主体应如下所示：

<body>
    <div class="main">
        <form name="form">
            <input class="textview" name="textview">
            <table>
                <tr>
                    <td><input type="button" class="button" value="C"></td>
                    <td><input type="button" class="button" value="<"></td>
                    <td><input type="button" class="button" value="/"></td>
                    <td><input type="button" class="button" value="x"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="7"></td>
                    <td><input class="button" type="button" value="8"></td>
                    <td><input class="button" type="button" value="9"></td>
                    <td><input class="button" type="button" value="-"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="4"></td>
                    <td><input class="button" type="button" value="5"></td>
                    <td><input class="button" type="button" value="6"></td>
                    <td><input class="button" type="button" value="+"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
                    <td><input class="button" type="button" value="2"></td>
                    <td><input class="button" type="button" value="3"></td>
                    <td><input class="button" type="button" value="+"></td>
                </tr>
            </table>
        </form>
    </div>
</body>