Html 为什么在页面的多个位置显示相同的按钮？

我正在使用代码笔开发一个简单的计算器应用程序。我正在尝试将

=

和

0

等键设置为按钮。到目前为止，我只将

=

和

ans

键设置为按钮。它会将这两个键都变成按钮，但它们也会出现在我页面的左上角。有人能告诉我发生了什么事吗

这是我的钢笔：

以下是HTML：

<div id="calculator">
</div>

<div id="resultBar">
</div>


<div id="numericOne" class="triangle-up">
  <p id="AC"><b>AC</b></p>
</div>


<div id="numericTwo" class="triangle-up">
  <p id="CE"><b>CE</b></p>
</div>

<div id="numericThree" class="triangle-up">
  <p id="percentage"><b>%<b></p>
</div>

<div id = "numericFour" class="triangle-up">
  <p id = "backSlash" ><b>/</b>
    <p>
</div>

<div id="numericFive" class="triangle-up">
  <p id="seven"><b>7</b></p>
</div>

<div id="numericSix" class="triangle-up">
  <p id="eight"><b>8</b></p>
</div>

<div id="numericSeven" class="triangle-up">
  <p id="nine"><b>9</b></p>
</div>

<div id="numericEight" class="triangle-up">
  <p id="asterik"><b>*</b></p>
</div>

<div id="numericNine" class="triangle-up">
  <p id="four"><b>4</b></p>
</div>

<div id="numericTen" class="triangle-up">
  <p id="five"><b>5</b></p>
</div>

<div id="numericEleven" class="triangle-up">
  <p id="six"><b>6</b></p>
</div>

<div id="numericTwelve" class="triangle-up">
  <p id="minus"><b>-</b></p>
</div>

<div id="numericThirteen" class="triangle-up">
  <p id="one"><b>1</b></p>
</div>

<div id="numericFourteen" class="triangle-up">
  <p id="two"><b>2</b></p>
</div>

<div id="numericFifteen" class="triangle-up">
  <p id="three"><b>3</b></p>
</div>

<div id="numericSixteen" class="triangle-up">
  <p id="plus"><b>+</b></p>
</div>

<div id="numericSeventeen" class="triangle-up">
  <p id="period"><b>.</b></p>
</div>

<div id="numericEighteen" class="triangle-up">
  <p id="zero"><b>0</p></b>
</div>

<button>
  <div id="numericNineteen" class="triangle-up">
    <p id="ans"><b>Ans</b>
      <p>
  </div>
</button>

<button>
  <div id="numericTwenty" class="triangle-up">
    <p id="equals"><b>=</b></p>
  </div>
</button>

---

您需要删除HTML中的按钮标记，包括第行的开始和结束：
-7
-11
-83
-88
-90，最后

---

-94

您需要为按钮分配类别和id。但您已经在div中指定了按钮，所以创建的按钮没有标签。因此，您必须更改代码，如下所示

<button id="numericNineteen" class="triangle-up">
Ans
</button>

Ans

---

由于高度和宽度设置为0，标签不可见。您需要使用按钮背景，如三角形形状，而不是应用样式。

我有一些更改

CSSS&HTML

结构

#计算器{
左：50%；
左边距：-188px；
z指数：-1；
位置：绝对位置；
显示：块；
宽度：400px；
高度：500px；
左侧填充：80px；
背景色：黑色；
-webkit边界半径：63px 63px 63px 63px/108px 108px 72px 72px；
边界半径：50%50%50%50%/60%60%40%40%；
}
#结果栏{
背景色：石灰；
边界半径：10px；
盒影：1px 0 5px 1px白色镶嵌；
高度：30px；
利润率：37px自动37px 80px；
宽度：150px；
}
.三角{
边框底部：50px固体石灰；
左边框：25px实心透明；
右边框：25px实心透明；
浮动：左；
身高：0；
边缘底部：20px；
右边距：31px；
宽度：0；
z指数：1；
}
/*#数字键{
位置：绝对位置；
左：575px；
顶部：100px；
}
#数字2{
位置：绝对位置；
顶部：100px；
左：635px；
}
#数字三{
位置：绝对位置；
顶部：100px；
左：695px；
}
#数字四{
位置：绝对位置；
顶部：100px；
左：755px；
}
#数字五{
位置：绝对位置；
顶部：170px；
左：575px；
}
#numericSix{
位置：绝对位置；
顶部：170px；
左：635px；
}
#数字偶数{
位置：绝对位置；
顶部：170px；
左：695px；
}
#数字视力{
位置：绝对位置；
顶部：170px；
左：755px；
}
#数字九{
位置：绝对位置；
顶部：240px；
左：575px；
}
#数字{
位置：绝对位置；
顶部：240px；
左：635px；
}
#数字列文{
位置：绝对位置；
顶部：240px；
左：695px；
}
#数字世界{
位置：绝对位置；
顶部：240px；
左：755px；
}
#数字十三{
位置：绝对位置；
顶部：310px；
左：575px；
}
#数字十四{
位置：绝对位置；
顶部：310px；
左：635px；
}
#数字十五{
位置：绝对位置；
顶部：310px；
左：695px；
}
#数值模拟{
位置：绝对位置；
顶部：310px；
左：755px；
}*/
#交流电{
位置：相对位置；
颜色：黑色；
顶部：10px；
右：12px；
}
#行政长官{
位置：相对位置；
颜色：黑色；
顶部：10px；
右：12px；
}
#百分比{
位置：相对位置；
颜色：黑色；
顶部：10px；
右：8px；
}
#反斜杠{
位置：相对位置；
颜色：黑色；
顶部：10px；
右：3px；
}
#七{
位置：相对位置；
颜色：黑色；
顶部：10px；
右：5px；
}
#八{
顶部：10px；
右：5px；
位置：相对位置；
}
#九{
位置：相对位置；
顶部：10px；
右：5px；
}
#阿斯特里克{
位置：相对位置；
顶部：10px；
右：5px；
}
#四{
位置：相对位置；
顶部：10px；
右：5px；
}
#五{
位置：相对位置；
顶部：10px；
右：5px；
}
#六{
位置：相对位置；
顶部：10px；
右：5px；
}
#减去{
位置：相对位置；
顶部：10px；
右：3px；
}
#一个{
位置：相对位置；
顶部：10px；
右：3px；
}
#两个{
位置：相对位置；
顶部：10px；
右：3px；
}
#三{
位置：相对位置；
顶部：10px；
右：4px；
}
#加上{
位置：相对位置；
顶部：10px；
右：4px；
}
/*#数字事件{
位置：绝对位置；
左：575px；
顶部：380px；
}
#数一数二{
位置：绝对位置；
左：635px；
顶部：380px；
}
<button id="numericNineteen" class="triangle-up">
Ans
</button>