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

Question

简介

您好！我对一般编码和使用 Whosebug、GitHub 等平台仍然很陌生，所以如果我在 post 中做错了什么，我提前道歉。

这也是我的第一个 post，所以请让我知道任何需要更正的地方，以便我知道如何在未来做出更连贯的 post。

问题

我遵循了 HTML、CSS、& JS 计算器在线教程并完成了完全相同的步骤，但是，当我运行代码时，我的按钮出现了不同尺寸，如下图所示： image of the buttons in different sizes

这是视频代码的屏幕截图： Calculator tutorial code

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

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

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>

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

谢谢！

Answer 1

        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>

Answer 2

我发现你输入的标签有错别字，你只需要在你写“类型”的地方写“class”，为了更好地理解，请看下面。

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

更改为：

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

Answer 3

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

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

正文应该是这样的：

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

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

The buttons for my HTML, CSS, JS calculator is coming out in various sizes

html

javascript

css

calculator

简介

问题