HTML / Javascript - 边框和对齐答案

【问题标题】：HTML / Javascript - Border and alignmentHTML / Javascript - 边框和对齐
【发布时间】：2015-11-14 10:50:00
【问题描述】：

为什么.symbols 没有上升到.results，为什么边界表现得很奇怪？

我已经尝试解决这个问题一个多小时，在此之前它工作得很好。认为它与 HTML 有关。

<!DOCTYPE html>
<html>
<head>
<title>Calc</title>
<style>
.calc {
 border: groove 6px;
 margin-left: 530px;
 margin-right: 530px;
 padding-top: 10px;
 padding-bottom: 10px;
}

.results {
 padding-bottom: 7px;
}

.top {
 float: left;
 padding-left: 20px;
}

.numbers {
 float: left;
 padding-left: 20px;
}

.symbols {
 float: right;
}

hr {
 width: 80%;
 padding-left: 20px;
}
</style>
<script>
function myFunction(clickedId) {
    document.calc.result.value+=clickedId;
}
function Clear() {
    document.calc.result.value="";
}
function compute() {
 try{
 var inp=eval(document.calc.result.value);
 document.calc.result.value=inp;
 }
 catch(err){
  document.calc.result.value="error";
 }
}
function doMath() {
 var inputNum1=document.calc.result.value;
 var result = Math.sqrt(inputNum1);
 document.calc.result.value = result;
}
function myMultiply() {
 var x = parseInt($('#num1').val(), 10);
 var y = x*x;
 alert(x + " times " + x + " equals " + y);
 return false;
}
</script>
</head>
<body>
<div class="calc">
<center>
<div class="results">
    <form name="calc">
    <input type="text" name="result" readonly>
    </form>
</div>
<table>
<div class="top">
    <button type="button" id="CLEAR" onclick="Clear()">c</button> <!--Izdzēst rakstīto-->
    <button type="button" id="3.141592653589793" onclick="myFunction(this.id)">π</button> <!--Skaitlis 3.14...-->
    <button type="button" id="6.283185307179586" onclick="myFunction(this.id)">τ</button> <!--Skaitlis 6.28...-->
</div>
<br>
<hr>
<div class="numbers">
    <button type="button" id="1" onclick="myFunction(this.id)">1</button> <!--Skaitlis 1-->
    <button type="button" id="2" onclick="myFunction(this.id)">2</button> <!--Skaitlis 2-->
    <button type="button" id="3" onclick="myFunction(this.id)">3</button> <!--Skaitlis 3-->
<br>
    <button type="button" id="4" onclick="myFunction(this.id)">4</button> <!--Skaitlis 4-->
    <button type="button" id="5" onclick="myFunction(this.id)">5</button> <!--Skaitlis 5-->
    <button type="button" id="6" onclick="myFunction(this.id)">6</button> <!--Skaitlis 6-->
<br>
    <button type="button" id="7" onclick="myFunction(this.id)">7</button> <!--Skaitlis 7-->
    <button type="button" id="8" onclick="myFunction(this.id)">8</button> <!--Skaitlis 8-->
    <button type="button" id="9" onclick="myFunction(this.id)">9</button> <!--Skaitlis 9-->
<br>
    <button type="button" id="0" onclick="myFunction(this.id)">0</button> <!--Skaitlis 0-->
</div>
<br>
<div class="symbols">
    <button type="button" id="ANS" onclick="compute()">=</button> <!--Vienādības zīme-->
	<br>
    <button type="button" id="*" onclick="myFunction(this.id)">x</button> <!--Reizināšanas zīme-->
	<br>
    <button type="button" id="/" onclick="myFunction(this.id)">÷</button> <!--Dalīšanas zīme-->
	<br>
    <button type="button" id="+" onclick="myFunction(this.id)">+</button> <!--Plusa zīme-->
	<br>
    <button type="button" id="-" onclick="myFunction(this.id)">-</button> <!--Mīnusa zīme-->
	<br>
	<button type="button" id="SQRT" onclick="doMath()">√</button> <!--Kvadrātsakne-->
</div>
<br>
</table>
</center>
</div>
</body>
</html>

【问题讨论】：

标签： javascript html css calculator calc

【解决方案1】：

我想这就是你所追求的。不要在代码中添加中断，而是使用 display 属性。这是fiddle 和result

function myFunction(clickedId) {
  document.calc.result.value += clickedId;
}

function Clear() {
  document.calc.result.value = "";
}

function compute() {
  try {
    var inp = eval(document.calc.result.value);
    document.calc.result.value = inp;
  } catch (err) {
    document.calc.result.value = "error";
  }
}

function doMath() {
  var inputNum1 = document.calc.result.value;
  var result = Math.sqrt(inputNum1);
  document.calc.result.value = result;
}

function myMultiply() {
  var x = parseInt($('#num1').val(), 10);
  var y = x * x;
  alert(x + " times " + x + " equals " + y);
  return false;
}

.calc {
  border: groove 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 40px;
  margin-left: 530px;
  margin-right: 530px;
}
.results {
  padding-bottom: 7px;
  margin-left: auto;
  margin-right: auto;
}
.top {
  float: left;
  padding-left: 20px;
}
.numbers {
  float: left;
  width: 80px;
  padding-left: 10px;
}
.symbols {
  padding-left: 40px;
  width: 20px;
  display: inline-block;
  vertical-align: top;
}
.numbers .button {
  display: inline-block;
}
.symbols .button {
  width: 20px;
  display: inline;
}
hr {
  width: 80%;
}

<body>
  <div class="calc">

    <div class="results">
      <form name="calc">
        <input type="text" name="result" readonly>
      </form>
    </div>

    <div class="top">
      <button type="button" id="CLEAR" onclick="Clear()">c</button>
      <!--Izdzēst rakstīto-->
      <button type="button" id="3.141592653589793" onclick="myFunction(this.id)">π</button>
      <!--Skaitlis 3.14...-->
      <button type="button" id="6.283185307179586" onclick="myFunction(this.id)">τ</button>
      <!--Skaitlis 6.28...-->
    </div>
    <br>
    <hr>
    <div class="numbers">
      <button type="button" id="1" onclick="myFunction(this.id)">1</button>
      <!--Skaitlis 1-->
      <button type="button" id="2" onclick="myFunction(this.id)">2</button>
      <!--Skaitlis 2-->
      <button type="button" id="3" onclick="myFunction(this.id)">3</button>
      <!--Skaitlis 3-->

      <button type="button" id="4" onclick="myFunction(this.id)">4</button>
      <!--Skaitlis 4-->
      <button type="button" id="5" onclick="myFunction(this.id)">5</button>
      <!--Skaitlis 5-->
      <button type="button" id="6" onclick="myFunction(this.id)">6</button>
      <!--Skaitlis 6-->

      <button type="button" id="7" onclick="myFunction(this.id)">7</button>
      <!--Skaitlis 7-->
      <button type="button" id="8" onclick="myFunction(this.id)">8</button>
      <!--Skaitlis 8-->
      <button type="button" id="9" onclick="myFunction(this.id)">9</button>
      <!--Skaitlis 9-->

      <button type="button" id="0" onclick="myFunction(this.id)">0</button>
      <!--Skaitlis 0-->
    </div>

    <div class="symbols">
      <button type="button" id="ANS" onclick="compute()">=</button>
      <!--Vienādības zīme-->

      <button type="button" id="*" onclick="myFunction(this.id)">x</button>
      <!--Reizināšanas zīme-->

      <button type="button" id="/" onclick="myFunction(this.id)">÷</button>
      <!--Dalīšanas zīme-->

      <button type="button" id="+" onclick="myFunction(this.id)">+</button>
      <!--Plusa zīme-->

      <button type="button" id="-" onclick="myFunction(this.id)">-</button>
      <!--Mīnusa zīme-->

      <button type="button" id="SQRT" onclick="doMath()">√</button>
      <!--Kvadrātsakne-->
    </div>


  </div>

  <body>

【讨论】：

【解决方案2】：

为什么.symbols 不上升到.results？

有一个<br>-标签在路上。 ugly 解决方法是将.symbols 向上移动一个负的margin-top。

为什么边界表现得很奇怪？

如果 weird 意味着按钮不在框架内，那是因为您的 div 上的 float-ing。同样，您可以给.calc一个固定的height。

【讨论】：