时间戳

首页 > 解决方案 > 如何将多行按钮与其中的不同文本对齐？

html - 如何将多行按钮与其中的不同文本对齐？

问题描述

我正在尝试重新创建 Microsoft Windows 10 计算器（查看以供参考）。我无法对齐所有按钮，因为按钮包含不同的字母和符号。我希望我的所有按钮大小完全相同，并且彼此相邻，它们之间没有空格。

此外，在发布此内容时，我注意到我的显示器更加向右突出。有什么解决办法吗？

链接到 HTML 和 CSS 组合： https ://codepen.io/anon/pen/jpLOjP

HTML：

<body>
  <form id="calculatorForm">
    <input type="text" id="display">
    <div class="row">
      <!--percent-->
      <button type="button" onclick="calculate()">&#37;</button>
      <!--sq root-->
      <button type="button" onclick="calculate()">&radic;</button>
      <!--x^2-->
      <button type="button" onclick="calculate()">x&sup2;</button>
      <!--1/x-->
      <button type="button" onclick="calculate()">&sup1;&frasl;<sub>x</sub></button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">CE</button>
      <button type="button" onclick="reset()">C</button>
      <!-- remove -->
      <button type="button" onclick="calculate()">&#8653;</button>
      <button type="button" onclick="calculate()">&divide;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">7</button>
      <button type="button" onclick="calculate()">8</button>
      <button type="button" onclick="calculate()">9</button>
      <button type="button" onclick="calculate()">&times;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">4</button>
      <button type="button" onclick="calculate()">5</button>
      <button type="button" onclick="calculate()">6</button>
      <button type="button" onclick="calculate()">&minus;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">1</button>
      <button type="button" onclick="calculate()">2</button>
      <button type="button" onclick="calculate()">3</button>
      <button type="button" onclick="calculate()">&plus;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">&plusmn;</button>
      <button type="button" onclick="calculate()">0</button>
      <button type="button" onclick="calculate()">&sdot;</button>
      <button type="button" onclick="calculate()">&equals;</button>
    </div>
  </form>
</body>

CSS：

#display {
  font-size: 90px;
  width: 100%;
}

form {
  background: #eee;
  border: solid grey;
  display: block;
  margin: 0 auto;
  width: 450px;
  padding: 10px;
}

.row {
  font-size: 0px;
  text-align: center;
  margin: 0 auto;
}

.row button {
  width: 25%;
  height: 60px;
  font-size: 40px;
  font-family: calibri;
}

标签： htmlcssbuttonalignmentcalculator

解决方案

你正在寻找vertical-align.

.row button{
    vertical-align: middle;
}

推荐阅读