0

Why isn't .symbols going up to .results and why is the border acting weird?

I have been trying to fix this problem for more than a hour, before this it worked just fine. Think it has something to do with the 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()">√&lt;/button> <!--Kvadrātsakne-->
</div>
<br>
</table>
</center>
</div>
</body>
</html>

4

2 回答 2

0
  1. Why isn't .symbols going up to .results?

There is a <br>-tag in the way. The ugly workaround would be to shift .symbols upwards with a negative margin-top. enter image description here

  1. Why is the border acting weird?

If weird means, that the buttons are not within the frame, its because the float-ing on your divs. Again, you could give .calc a fixed height.

于 2015-08-20T17:57:17.633 回答
0

I imagine this is what you're after. Instead of putting breaks in your code, use the display property. Here is a fiddle and the 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()">√&lt;/button>
      <!--Kvadrātsakne-->
    </div>


  </div>

  <body>

于 2015-08-20T22:13:42.860 回答