html - HTML / CSS中的未对齐按钮？

问题描述

我正在尝试组装一个基本的计算器来帮助练习一些 HTML 和 CSS。我很早就遇到了一个我似乎无法解决的问题。有些按钮没有对齐，我不知道为什么。

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Calculator # 2!</title>
  <link rel="stylesheet" href="./styles_2.css">
</head>

<body>
  <div class=" calculator">
    <div class="display">
      10000000000010000
    </div>
    <div class="row">
      <button class="">%</button>
      <button class="">CE</button>
      <button class="">C</button>
      <button class="">&#x2190</button>
    </div>
    <div class="row">
      <button class=""><sup>1/</sup>&#x1D4B3;</button>
      <button class="">&#x1D4B3;<sup>2</sup></button>
      <button class="">&#8730;</button>
      <button class="">&#247;</button>
    </div>
    <div class="row">
      <button class="">7</button>
      <button class="">8</button>
      <button class="">9</button>
      <button class="">&#215;</button>
    </div>
    <div class="row">
      <button class="">4</button>
      <button class="">5</button>
      <button class="">6</button>
      <button class="">&#8722;</button>
    </div>
    <div class="row">
      <button class="">1</button>
      <button class="">2</button>
      <button class="">3</button>
      <button class="">&#43;</button>
    </div>
    <div class="row">
      <button class=""><sup>&#43;/</sup>&#8722;</button>
      <button class="">0</button>
      <button class="">.</button>
      <button class="">=</button>
    </div>


  </div>
</body>

</html>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient(to left, blue, pink);
  padding: 0;
  margin: 0;
}

.calculator {
  text-align: center;
  margin: auto;
}
.row {
  height: 80px;
}

.display {
  width: 150px;
  height: 40px;
  word-wrap: break-word;
  
}

button {
  text-align: center;
  font-size: 20px;
  margin: auto;
  padding: auto;
  height: 70px;
  width: 70px;
  
}

我制作了一个带有类计算器的 div 作为容器元素来包含所有行，然后在其中包含 6 个后续行作为按钮。所有按钮都具有相同的尺寸和填充/边距，并且所有行都相同，所以我似乎无法理解为什么会这样。按钮似乎在水平方向上正确对齐，但它们之间的垂直空间并不通用，分别用平方根和 +/- 符号可以看出。我已经调整了一些代码并弄乱了行的高度/宽度，但无法弄清楚。任何帮助是极大的赞赏！

标签： htmlcssbuttonalignmentcalculator

考虑使用 CSS Grid或Flexbox。两者都旨在帮助创建您所追求的布局。下面是一个使用 Flexbox 的示例：

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(to left, blue, pink);
  padding: 0;
  margin: 0;
}

.display {
  width: 150px;
  height: 40px;
  word-wrap: break-word;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  width: 280px;
}

button {
  text-align: center;
  font-size: 30px;
  margin: auto;
  padding: auto;
  height: 70px;
  width: 70px;
}

<div class=" calculator">
  <div class="display">
    10000000000010000
  </div>
  <div class="buttons">
    <button class="">%</button>
    <button class="">CE</button>
    <button class="">C</button>
    <button class="">&#x2190</button>

    <button class=""><sup>1/</sup>&#x1D4B3;</button>
    <button class="">&#x1D4B3;<sup>2</sup></button>
    <button class="">&#8730;</button>
    <button class="">&#247;</button>

    <button class="">7</button>
    <button class="">8</button>
    <button class="">9</button>
    <button class="">&#215;</button>

    <button class="">4</button>
    <button class="">5</button>
    <button class="">6</button>
    <button class="">&#8722;</button>

    <button class="">1</button>
    <button class="">2</button>
    <button class="">3</button>
    <button class="">&#43;</button>

    <button class=""><sup>&#43;/</sup>&#8722;</button>
    <button class="">0</button>
    <button class="">.</button>
    <button class="">=</button>
  </div>
</div>

html - HTML / CSS中的未对齐按钮？

问题描述

解决方案

推荐阅读