为什么计算器上的最后一行按钮没有像所有其他按钮一样对齐？

我已经尝试了几个小时，没有尽头地让计算器上的最后一行红色按钮对齐，就像计算器上的所有其他按钮对齐一样，但它就是不会对齐！我不知道为什么！你能告诉我我的代码中哪里出错了吗？

这是我的代码笔的链接：https://codepen.io/IDCoder/full/zEBoOQ/

这是我的 HTML：

<DOCTYPE html>
<html>
    <head>
        <title>Ziontific Calculator</title>
    <meta name="viewport" content="initial-scale=1">
    </head>
    <body>
        <div class="container">
        <h1 id="heading">ZIONTIFIC CALCULATOR</h1>
        <div class="form holder">
           <form id="formone" name="calc">
          <input id="display" type="text" name="display" value=".....Get on board...." disabled contenteditable="false" >
          <br>
          <input class="button number one" type="button" value="1" onClick=”calc.display.value+=1”>
          <input class="button number one" type="button" value="2" onClick="calc.display.value+=2">
          <input class="button number one" type="button" value="3" onClick="calc.display.value+=3">
          <input class="button three" type="button" value="C" onClick="Resetfunction(this.form)">
          <input class="button three" type="button" value="<-" onClick="backspace(this.form)">
          <input class="button three" type="button" value="=" onClick="evaluation(this.form)">
          <br>
          <input class="button number one" type="button" value="4" onClick="calc.display.value+=4">
          <input class="button number one" type="button" value="5" onClick="calc.display.value+=5">
          <input class="button number one" type="button" value="6" onClick="calc.display.value+=6">
          <input class="button opps one" type="button" value="-" onClick="calc.display.value+='-'">
          <input class="button opps one" type="button" value="%" onClick="calc.display.value+='%'">
          <input class="button end one" type="button" value="cos" onClick="cos_function()">
          <br>

          <input class="button number two" type="button" value="7" onClick=”calc.display.value+=7”>
          <input class="button number two" type="button" value="8" onClick=”calc.display.value+=8”>
          <input class="button number two" type="button" value="9" onClick=”calc.display.value+=9”>
          <input class="button opps two" type="button" value="*" onClick="calc.display.value+='*'">
          <input class="button n" type="button" value="n!" onClick="fact_function()">
          <input class="button sin"type="button" value="sin" onClick="sin_function()">
          <br>
          <input class="button opps two" type="button" value="." onClick="calc.display.value+='.'">
          <input class="button number two" type="button" value="0" onClick="calc.display.value+=0">
          <input class="button opps two" type="button" value="," onClick="calc.display.value+=','">
          <input class="button opps two" type="button" value="+" onClick="calc.display.value+='+'">
          <input class="button opps two" type="button" value="/" onClick="calc.display.value+='/'">
          <input class="button end two" type="button" value="tan" onClick=”tan_function()”>
          <br>
          <input class="button third row" type="button" value="E" onClick="calc.display.value+=2.718">
          <input class="button third row" type="button" value="pi" onClick="calc.display.value+=3.141">
          <input class="button third row" type="button" value="x^y" onClick="power_function()">
          <input class="button third row" type="button" value="(" onClick="openpara(this.value)">
          <input class="button third row" type="button" value=")" onClick="closepara(this.value)">
          <input class="button third row" type="button" value="log" onClick="log_function()">
          <br>
          <input class="button third row" type="button" value="sqrt" onClick="sqrt_function()">
          <input class="button third row" type="button" value="LN2" onClick="calc.display.value+=0.693">
          <input class="button third row" type="button" value="LN10" onClick="calc.display.value+=2.302">
          <input class="button third row" type="button" value="log2E" onClick="calc.display.value+=1.442">
          <input class="button third row" type="button" value="log10E" onClick="calc.display.value+=0.434">
          <input class="button third row" type="button" value="EXP" onClick="exp_function">
          </form>
            </div>
        </div>
    </body>
</html>

这是我的 CSS：

body{
  text-align: center;
  background-color;
}

h1{
color: white;
}

    .container{
        background-image:   url(https://s26.postimg.org/frq6u3odl/texture-seamless-wood-3.jpg);
        position: relative;
        max-width: 550px;
    padding: 10px;
        height: auto;
        margin: auto;
        top: 0;
        border: 0;
}
.form.holder{
  max-width:500px;
  height:auto;
  margin: auto;
  padding-bottom: 0;
  background-color:black;
  text-align:center;
  border-radius:10px;
  border:2px groove #333;
  box-shadow:4px 4px 2px #666666;
  overflow: hidden;
}
 #formone{
    padding-top:35px;
    padding-bottom: 10px;
}  
input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

#display{ 
  height:60px;
  width:83%;
  color: blue;
  margin:3px;
  border:2px inset black;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius: 5px;
  background-color:#c6c6c4;
}

.button.end.one,.button.number.one,.button.three,.button.opps.one,.button.number.two,.button.opps.two,.button.n, .button.sin,.button.end.two,.button.third.row {
font-size: 20px;
transition: all 0.5s ease-in-out;
cursor: pointer;
border-radius: 5px;
border: none;
color: white;
width:12.5%;
height:60px;
margin: 3px;
}

.button.end.one{
  background-color: #4CAF50;
}

.button.number.one{
  background-color: #4CAF50;
}

.button.three{
background-color: #4CAF50;
}

.button.opps.one{
  background-color: #4CAF50;
  }

.button.number.two{
  background-color: #ffff00;
}

.button.opps.two{
  background-color: #ffff00;
}
.button.n{
  background-color: #ffff00;
}
.button.sin{
  background-color: #ffff00;
}
.button.end.two{
  background-color: #ffff00;
}

.button.third.row{
  background-color: #ef1a07;
}
@media only screen and (max-width: 450px) {
 #heading{
  font-size: 20px !important;
 } 
}

另外，即使屏幕尺寸缩小，如何让输入显示区域跨越按钮的确切长度？目前，显示区域的宽度编码为 83%，但随着屏幕大小的缩小，它不会跨越整行按钮。为什么？

#display{ 
  height:60px;
  **width:83%;**
  color: blue;
  margin:3px;
  border:2px inset black;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius: 5px;
  background-color:#c6c6c4;
}

删除除第一个标记之外的所有br标记。 br标签存在空格问题，这会破坏您的布局。

演示：https://codepen.io/anon/pen/zEyWBq

更改此部分：

<input class="button third row" type="button" value="log" onClick="log_function()">
<br>
<input class="button third row" type="button" value="sqrt" onClick="sqrt_function()">

对此：

<input class="button third row" type="button" value="log" onClick="log_function()"><br><input class="button third row" type="button" value="sqrt" onClick="sqrt_function()">

似乎可以解决它。基本上HTML在<br>附近看到一个空白区域，这导致它之后的所有内容都向右移动。将元素更改为display:block;并赋予它们float:left;也会导致忽略空格。

相关内容

最新更新

热门标签：