如何使所有JavaScript按鈕的大小相同？

Question

如何使所有JavaScript按鈕的大小相同？ 我在做一個計算器，如果所有按鈕的大小都不一樣，那真令人惡心。 我一直在嘗試這樣做至少一個小時，但找不到任何說明如何執行此操作的StakOverFlow帖子或教程。

我的代碼：

 <!DOCTYPE html> <html> <head> <title>Calc</title> <style> .calc {border: groove 6px; margin-left: 530px; margin-right: 530px; padding-top: 10px; padding-bottom: 10px; height: 200px;} input {text-align: center;height: 30px;} .results {padding-bottom: 7px;} .top {float: left; padding-left: 20px;} .numbers {float: left; padding-left: 20px; padding-top: 15px;} .symbols {float: right; margin-top: -40px; padding-right: 15px;} </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 (document.calc.result.value, 10); var y = x*x; alert(x + " times " + x + " equals " + y); return false; } function compute() { try{ var inp=eval(document.calc.result.value); if(document.calc.result.value==inp) inp=inp*inp document.calc.result.value=inp; } catch(err){ document.calc.result.value="error"; } } </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()"><font color="#CC0000">C</font></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> <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--> <br> <button type="button" id="imp*inp" onclick="compute()"><sub>2</sub></button> <!--Kvadrāts--> </div> <br> </table> </center> </div> <center> <p>Special thanks to my peeps at <a href="http://www.stackoverflow.com">StackOverFlow</a> for helping me with some issues!</p> <!--Pateicības piezīme--> </center> </body> </html>

Answer 1

嘗試添加一些CSS：

button {
    width: 40px;
    height: 40px;
}

Answer 2

您可以通過CSS來執行此操作，而無需JS：

.symbols button{
  width: 35px;
  height: 35px;
}

這將定位符號div中的所有按鈕。

您還可以使其更通用：

button{
  width: 35px;
  height: 35px;
}

然后將為頁面上的每個按鈕設置樣式。

如何使所有JavaScript按鈕的大小相同？

問題描述

2 個解決方案

解決方案1
3 2015-08-21 12:17:23

解決方案2
1 2015-08-21 12:18:09

如何使所有JavaScript按鈕的大小相同？

問題描述

2 個解決方案

解決方案1 3 2015-08-21 12:17:23

解決方案2 1 2015-08-21 12:18:09

解決方案1
3 2015-08-21 12:17:23

解決方案2
1 2015-08-21 12:18:09