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

时间：2016-02-01 06:02:38

标签： html button

我正在使用代码笔处理一个简单的计算器应用程序。我正在尝试将=和0等键设置为按钮。到目前为止，我只将=和ans键设置为按钮。它将这些键转换为按钮，但它们也出现在我页面的左上角。有人能告诉我最新情况吗？

这是我的笔： http://codepen.io/roryavant8/pen/OMZjKR

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

这是我的CSS：

#calculator{ 
   left:50%;
   margin-left: -188px; 
   z-index: -1; 
   position:absolute;
   display:block;
   width: 400px;
   height: 500px;
   background-color: black;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

#resultBar{
  position:absolute;
  width:150px;
  background-color:lime;
  height:30px;
  top:45px;
  left: 610px;
  border-radius:10px;
  box-shadow: inset 1px 0px 5px 1px white;
}

.triangle-up {

  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid lime;
  z-index: 1;

}

#numericOne{
    position:absolute;
    left:575px;
    top:100px;
}

#numericTwo{
  position:absolute;
  top:100px;
  left:635px;
}

#numericThree{
  position:absolute;
  top:100px;
  left:695px;
}

#numericFour{
  position:absolute;
  top:100px;
  left:755px;
}

#numericFive{
  position:absolute;
  top:170px;
  left:575px;
}

#numericSix{
  position:absolute;
  top:170px;
  left:635px;
}

#numericSeven{
  position:absolute;
  top:170px;
  left: 695px;
}

#numericEight{
  position:absolute;
  top:170px;
  left:755px;
}

#numericNine{
  position:absolute;
  top:240px;
  left:575px;
}

#numericTen{
  position:absolute;
  top:240px;
  left: 635px;
}

#numericEleven{
  position:absolute;
  top:240px;
  left:695px;
}

#numericTwelve{
  position:absolute;
  top:240px;
  left:755px;
}

#numericThirteen{
  position:absolute;
  top:310px;
  left:575px;
}

#numericFourteen{
  position:absolute;
  top:310px;
  left:635px;
}

#numericFifteen{
  position:absolute;
  top:310px;
  left:695px;
}

#numericSixteen{
  position:absolute;
  top:310px;
  left:755px;
}

#AC{
  position:relative;
  color:black;
  top:10px;
  right:12px;

}

#CE{
  position:relative;
  color:black;
  top:10px;
  right:12px;
}

#percentage{
  position:relative;
  color:black;
  top:10px;
  right:8px;
}

#backSlash{
  position:relative;
  color:black;
  top:10px;
  right: 3px;
  }

#seven{
  position:relative;
  color:black;
  top:10px;
  right:5px;
}

#eight{
  top:10px;
  right:5px;
  position:relative;
}

#nine{
  position:relative;
  top:10px;
  right:5px;
}

#asterik{
  position:relative;
  top:10px;
  right:5px;
}

#four{
  position:relative;
  top:10px;
  right:5px;
}

#five{
  position:relative;
  top:10px;
  right:5px;
}

#six{
  position:relative;
  top:10px;
  right:5px;
}

#minus{
  position: relative;
  top: 10px;
  right: 3px;
}

#one{
  position:relative;
  top: 10px;
  right: 3px;
}

#two{
  position:relative;
  top: 10px;
  right:  3px;
}

#three{
  position:relative;
  top: 10px;
  right: 4px;
}

#plus{
  position:relative;
  top: 10px;
  right: 4px;
}

#numericSeventeen{
  position:absolute;
  left: 575px;
  top: 380px;
}

#numericEighteen{
  position:absolute;
  left: 635px;
  top: 380px;
}

#numericNineteen{
  position:absolute;
  left: 695px;
  top: 380px;
}

#numericTwenty{
  position:absolute;
  left: 755px;
  top: 380px;
 }

#period{
  position:relative;
  top:5px;
  right: 1px;
}

#zero{
  position:relative;
  top:6px;
  right: 4px;
}

#ans{
  position:relative;
  top: 6px;
  right: 14px
}

#equals{
  position: relative;
  top: 10px;
  right: 4px;
}

#calculator{
  border-style: solid;
  border-color:lime;
  box-shadow:  5px 7px 5px 1px grey,
    inset 2px 2px 10px 0px grey;
}

.remove-background{
  background:none;
  border:none;
}

button{
  cursor:pointer;
}

3 个答案:

答案 0 :(得分：0)

您需要删除HTML中的按钮标记，包括打开和关闭行：
- 7
- 11
- 83
- 88
- 90，最后是 - 94

答案 1 :(得分：0)

您需要为按钮分配class和id。但是你在div里面给了一个按钮。因此按钮创建时没有标签。所以你必须改变你的代码，如下所示。 

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

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

答案 2 :(得分：0)

我有一些更改CSSS & HTML结构

#calculator {
            left: 50%;
            margin-left: -188px;
            z-index: -1;
            position: absolute;
            display: block;
            width: 400px;
            height: 500px;
            padding-left: 80px;
            background-color: black;
            -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        }


        #resultBar {
            background-color: lime;
            border-radius: 10px;
            box-shadow: 1px 0 5px 1px white inset;
            height: 30px;
            margin: 37px auto 37px 80px;
            width: 150px;
        }


        .triangle-up {
            border-bottom: 50px solid lime;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            float: left;
            height: 0;
            margin-bottom: 20px;
            margin-right: 31px;
            width: 0;
            z-index: 1;
        }

        /*#numericOne {
            position: absolute;
            left: 575px;
            top: 100px;
        }

        #numericTwo {
            position: absolute;
            top: 100px;
            left: 635px;
        }

        #numericThree {
            position: absolute;
            top: 100px;
            left: 695px;
        }

        #numericFour {
            position: absolute;
            top: 100px;
            left: 755px;
        }

        #numericFive {
            position: absolute;
            top: 170px;
            left: 575px;
        }

        #numericSix {
            position: absolute;
            top: 170px;
            left: 635px;
        }

        #numericSeven {
            position: absolute;
            top: 170px;
            left: 695px;
        }

        #numericEight {
            position: absolute;
            top: 170px;
            left: 755px;
        }

        #numericNine {
            position: absolute;
            top: 240px;
            left: 575px;
        }

        #numericTen {
            position: absolute;
            top: 240px;
            left: 635px;
        }

        #numericEleven {
            position: absolute;
            top: 240px;
            left: 695px;
        }

        #numericTwelve {
            position: absolute;
            top: 240px;
            left: 755px;
        }

        #numericThirteen {
            position: absolute;
            top: 310px;
            left: 575px;
        }

        #numericFourteen {
            position: absolute;
            top: 310px;
            left: 635px;
        }

        #numericFifteen {
            position: absolute;
            top: 310px;
            left: 695px;
        }

        #numericSixteen {
            position: absolute;
            top: 310px;
            left: 755px;
        }*/

        #AC {
            position: relative;
            color: black;
            top: 10px;
            right: 12px;
        }

        #CE {
            position: relative;
            color: black;
            top: 10px;
            right: 12px;
        }

        #percentage {
            position: relative;
            color: black;
            top: 10px;
            right: 8px;
        }

        #backSlash {
            position: relative;
            color: black;
            top: 10px;
            right: 3px;
        }

        #seven {
            position: relative;
            color: black;
            top: 10px;
            right: 5px;
        }

        #eight {
            top: 10px;
            right: 5px;
            position: relative;
        }

        #nine {
            position: relative;
            top: 10px;
            right: 5px;
        }

        #asterik {
            position: relative;
            top: 10px;
            right: 5px;
        }

        #four {
            position: relative;
            top: 10px;
            right: 5px;
        }

        #five {
            position: relative;
            top: 10px;
            right: 5px;
        }

        #six {
            position: relative;
            top: 10px;
            right: 5px;
        }

        #minus {
            position: relative;
            top: 10px;
            right: 3px;
        }

        #one {
            position: relative;
            top: 10px;
            right: 3px;
        }

        #two {
            position: relative;
            top: 10px;
            right: 3px;
        }

        #three {
            position: relative;
            top: 10px;
            right: 4px;
        }

        #plus {
            position: relative;
            top: 10px;
            right: 4px;
        }

        /*#numericSeventeen {
            position: absolute;
            left: 575px;
            top: 380px;
        }

        #numericEighteen {
            position: absolute;
            left: 635px;
            top: 380px;
        }

        #numericNineteen {
            position: absolute;
            left: 695px;
            top: 380px;
        }

        #numericTwenty {
            position: absolute;
            left: 755px;
            top: 380px;
        }*/

        #period {
            position: relative;
            top: 5px;
            right: 1px;
        }

        #zero {
            position: relative;
            top: 6px;
            right: 4px;
        }

        #ans {
            position: relative;
            top: 6px;
            right: 14px;
        }

        #equals {
            position: relative;
            top: 10px;
            right: 4px;
        }

        #calculator {
            border-style: solid;
            border-color: lime;
            box-shadow: 5px 7px 5px 1px grey, inset 2px 2px 10px 0px grey;
        }

        .remove-background {
            background: none;
            border: none;
        }

        button {
            background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
            border: 0 none;
            cursor: pointer;
        }
<div id="calculator">


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


        <div id="numericOne" class="triangle-up">
            <button>
                <p id="AC"><b>AC</b></p>
            </button>
        </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</b></p>
        </div>


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



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

    </div>

相关问题
最新问题