我想用 css 重新创建一个计算器键盘

Question

我想在 css 中重新创建这个计算器： Calculator

但是我可以在按钮周围做那些方形分隔符。我试图在按钮周围创建一个 div，但它似乎不起作用，因为键盘翻转错位了

  <div id="calculator">

    <div class="output">
      <p>1234</p>
    </div>

    <div class="squareborder">
      <button class="minus">c</button>
    </div>
    <button class="minus">cm</button>
    <button class="equal">%</button>
    <button class="equal">rm</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button class="equal">÷</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="equal">x</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="minus">-</button>
    <button>0</button>
    <button>•</button>
    <button class="equal">=</button>
    <button class="plus">+</button>
  </div>
</body>
</html>

Answer 1

肯定有多种方法可以做到这一点，但我会这样做...

将每行按钮包装成一个 <div class="row"> 元素以应用 flex
将每个按钮包装到 border

<span class="squareborder">

将 squareborder class 样式设置为 box-shadow 深度

我也不得不玩 CSS 一点，但没什么特别的！

顺便说一下...你的计算器真棒，干得好伙计

#calculator {
  background-color: #918764;
  width: 12.5em;
  padding: 2em 0 0.8em;
}

.output {
  box-shadow: inset 0 1.6em rgba(255, 255, 255, 0.1);
  font-family: 'Krona One', sans-serif;
  font-size: 10pt;
  background-color: #3d0000;
  color: #e8001f;
  width: 13em;
  padding: 0 0.7em;
  display: flex;
  justify-content: flex-end;
  align-content: center;
  margin: 0 auto 0.3em;
  border: none;
  border-radius: 0.3em;
}

button {
  font-family: 'Krona One', sans-serif;
  background-color: #988d6d;
  color: #fffde7;
  border: none;
  width: 2.6em;
  margin: 0.3em;
  padding: 0.7em 0.6em;
  border-radius: 4em;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  cursor: pointer;
}

button.equal {
  background-color: #21302b
}

button.plus {
  background-color: #21302b;
  color: #2ea4ee;
}

button.minus {
  background-color: #21302b;
  color: #89734e;
}

.row {
  display: flex;
  justify-content: center;
}

.squareborder {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.4);
  border-radius: 0.2em;
  margin: 1px;
  padding: 2px
}

<link href="https://fonts.googleapis.com/css?family=Krona+One&display=swap" rel="stylesheet">

<div id="calculator">

  <div class="output">
    <p>1234</p>
  </div>

  <div class="row">
    <span class="squareborder">
      <button class="minus">c</button>
    </span>
    <span class="squareborder">
      <button class="minus">cm</button>
    </span>
    <span class="squareborder">
      <button class="equal">%</button>
    </span>
    <span class="squareborder">
      <button class="equal">rm</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>7</button>
    </span>
    <span class="squareborder">
      <button>8</button>
    </span>
    <span class="squareborder">
      <button>9</button>
    </span>
    <span class="squareborder">
      <button class="equal">÷</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>4</button>
    </span>
    <span class="squareborder">
      <button>5</button>
    </span>
    <span class="squareborder">
      <button>6</button>
    </span>
    <span class="squareborder">
      <button class="equal">x</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>1</button>
    </span>
    <span class="squareborder">
      <button>2</button>
    </span>
    <span class="squareborder">
      <button>3</button>
    </span>
    <span class="squareborder">
      <button class="minus">-</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>0</button>
    </span>
    <span class="squareborder">
      <button>*</button>
    </span>
    <span class="squareborder">
      <button class="equal">=</button>
    </span>
    <span class="squareborder">
      <button class="plus">+</button>
    </span>
  </div>
</div>

我想用 css 重新创建一个计算器键盘

I want to recreate a calculator keyboard with css

css

calculator

button

flexbox

jsbin