Question

我试图创建一个简单的计算器，仅使用HTML和CSS作为布局，并最终使用纯JavaScript作为函数。

我希望网站/页面能够响应，这就是为什么我使用CSS Grid并且没有绝对单位的原因；％和fr而不是px ...

计算器本身应为中心正方形的网格，并且按钮中的文本水平和垂直居中，并且所有按钮都应位于“计算器”之内。

<html>
   <body>
      <div class="calc">
        <button id="bp">+&nbsp;/&nbsp;-</button>
        <button id="bc">C</button>
        <button id="bb">X</button>
         <button id="b7">7</button>
         <button id="b8">8</button>
         <button id="b9">9</button>
         <button id="b4">4</button>
         <button id="b5">5</button>
         <button id="b6">6</button>
         <button id="b1">1</button>
         <button id="b2">2</button>
         <button id="b3">3</button>
         <button id="bd">.</button>
         <button id="b0">0</button>
         <button id="be">=</button>
      </div>
   </body>
</html>

div.calc {
   max-width: 80%;
   margin: 1% auto;

   border: 2px solid #111111;
   border-radius: 5px;
   padding: 1%;

    display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 2%;

    justify-items: center;
    align-items: center; 
}

div.calc > button {
   background-color: lightgrey;
   color: darkblue;

   border: 2px solid #111111;
   border-radius: 5px;

   font-size: 2em;
   cursor: pointer;

   vertical-align: center;
   text-align: center;

   width: 100%;
   height: 0;
   padding: 50%;
}

button#bp,
button#bd {
    background-color: blue;
    color: yellow;
}

button#bc {
    background-color: red;
    color: white;
}

button#bb {
    background-color: yellow;
    color: blue;
}

button#be {
    background-color: green;
    color: yellow;
}

Codepen

计算器div的高度似乎不足以容纳按钮，因此网格的底行在计算器外部重叠并出血。

我尝试使用calc div的高度（高度：100％...），但最后一行总是越过...

我似乎无法使按钮内的文本正确居中；特别是水平的“ + /-”按钮就是一个很好的例子。我已将text-align设置为居中，而justify-items和align-items都居中。我知道那最后两个引用了网格中的按钮项本身。但是我看不到其他什么地方可以使文本正确居中。

我希望这是一件非常简单的事情，我只是一次又一次地盯着相同的代码，哦太多了。

如果您不想更正我的代码，而是想给我指出任何在线示例或解释，这将有助于我很乐意完成作业。

谢谢！

Answer 1

问题是grid-gap:2%。它可以水平使用，因为我们可以根据宽度解析2％，但是对于高度，由于未定义高度，因此无法使用。基本上，浏览器首先计算没有间距的高度，然后添加间距。

为此，您应考虑使用px或其他类似vw/vh的单元。我还更改了将按钮居中的方式。（Centering in CSS Grid）

div.calc {
  max-width: 80%;
  margin: 1% auto;
  border: 2px solid #111111;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  
  grid-gap: 1vw;
  padding: 1vw; /*make the padding the same*/
}

div.calc>button {
  background-color: lightgrey;
  color: darkblue;
  border: 2px solid #111111;
  border-radius: 5px;
  font-size: 2em;
  cursor: pointer;
  /*to center*/
  display: flex;
  align-items: center;
  justify-content: center;
  /**/
}
/*keep the ratio*/
div.calc>button:before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}
/**/
button#bp,
button#bd {
  background-color: blue;
  color: yellow;
}

button#bc {
  background-color: red;
  color: white;
}

button#bb {
  background-color: yellow;
  color: blue;
}

button#be {
  background-color: green;
  color: yellow;
}

<div class="calc">
    <button id="bp">+&nbsp;/&nbsp;-</button>
    <button id="bc">C</button>
    <button id="bb">X</button>
    <button id="b7">7</button>
    <button id="b8">8</button>
    <button id="b9">9</button>
    <button id="b4">4</button>
    <button id="b5">5</button>
    <button id="b6">6</button>
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="bd">.</button>
    <button id="b0">0</button>
    <button id="be">=</button>
  </div>

Answer 2

带有三列按钮框的flexbox方法的替代解决方案。希望对您有帮助。

* {
    box-sizing: border-box;
    position: relative;
}

div.calc {
    max-width: 80%;
    margin: 1% auto;
    border: 2px solid #111111;
    border-radius: 5px;
    padding: 1%;
    /* display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 2%;      
	justify-items: center;
	align-items: center;  */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

div.calc > button {
    background-color: lightgrey;
    color: darkblue;
    border: 2px solid #111111;
    border-radius: 5px;
    font-size: 2em;
    cursor: pointer;
    vertical-align: center;
    text-align: center;
    height: 0;
    padding: 12%;
    flex-grow: 1;
    width: 31%;
    height: 31%;
    margin: 5px;
}

button#bp,
button#bd {
    background-color: blue;
    color: yellow;
}

button#bc {
    background-color: red;
    color: white;
}

button#bb {
    background-color: yellow;
    color: blue;
}

button#be {
    background-color: green;
    color: yellow;
}

<div class="calc">
    <button id="bp">+&nbsp;/&nbsp;-</button>
    <button id="bc">C</button>
    <button id="bb">X</button>
    <button id="b7">7</button>
    <button id="b8">8</button>
    <button id="b9">9</button>
    <button id="b4">4</button>
    <button id="b5">5</button>
    <button id="b6">6</button>
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="bd">.</button>
    <button id="b0">0</button>
    <button id="be">=</button>
</div>

CSS网格：居中和重叠的难题

2 个答案: