如何固定按钮位置？

Question

我正在屏幕上创建一个数字键盘。我想将数字0居中或制作一个更大的按钮来覆盖div的整个区域。

这是我正在使用的代码：

        .numPad {
            border: 1px solid #b7b7b7;
            width: 100px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            padding: 0px;
            background-color: #f1f1f1;
        }
        .numPad button {
            padding: 5px;
            background-color: #f1f1f1;
            border: 1px solid #b7b7b7;
            outline: none;
            color: #000;
            padding: 5px 5px;
            text-align: center;
            text-decoration: none;
            font-size: 16px;
            font-family: 'Cinzel Decorative', cursive;
            margin: 0;
            cursor: pointer;
            z-index: 0;
            transform: scale(1);
            transition: all 0.05s;
        }
        .numPad button:active {
            z-index: 1;
            background-color: #dedede;
            transform: scale(1.15);
        }
        .zero {
            display: block !important;
            width: 100%;
        }

。zero类是试图赋予该0按钮效果的类。

这里是HTML：

   <div class="numPad">
        <button value="1">1</button>
        <button value="2">2</button>
        <button value="3">3</button>
        <button value="4">4</button>
        <button value="5">5</button>
        <button value="6">6</button>
        <button value="7">7</button>
        <button value="8">8</button>
        <button value="9">9</button>
        <button value="0" class="zero">0</button>
    </div>

感谢您的时间和帮助！

Answer 1

您可以将网格列设置为数字0按钮的中心。

.zero {
  display: block !important;
  grid-column: 2 / 3; /* set grid column */
  width: 100%;
}

.numPad {
  border: 1px solid #b7b7b7;
  width: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0px;
  background-color: #f1f1f1;
}

.numPad button {
  padding: 5px;
  background-color: #f1f1f1;
  border: 1px solid #b7b7b7;
  outline: none;
  color: #000;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-family: 'Cinzel Decorative', cursive;
  margin: 0;
  cursor: pointer;
  z-index: 0;
  transform: scale(1);
  transition: all 0.05s;
}

.numPad button:active {
  z-index: 1;
  background-color: #dedede;
  transform: scale(1.15);
}

.zero {
  display: block !important;
  grid-column: 2 / 3; /* set grid column */
  width: 100%;
}

<div class="numPad">
  <button value="1">1</button>
  <button value="2">2</button>
  <button value="3">3</button>
  <button value="4">4</button>
  <button value="5">5</button>
  <button value="6">6</button>
  <button value="7">7</button>
  <button value="8">8</button>
  <button value="9">9</button>
  <button value="0" class="zero">0</button>
</div>

Answer 2

您可以通过添加]使其覆盖整个底部。>

    .zero {
      grid-column: 1/4;
    }
喜欢这个：

       .numPad {
            border: 1px solid #b7b7b7;
            width: 100px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            padding: 0px;
            background-color: #f1f1f1;
        }
        .numPad button {
            padding: 5px;
            background-color: #f1f1f1;
            border: 1px solid #b7b7b7;
            outline: none;
            color: #000;
            padding: 5px 5px;
            text-align: center;
            text-decoration: none;
            font-size: 16px;
            font-family: 'Cinzel Decorative', cursive;
            margin: 0;
            cursor: pointer;
            z-index: 0;
            transform: scale(1);
            transition: all 0.05s;
        }
        .numPad button:active {
            z-index: 1;
            background-color: #dedede;
            transform: scale(1.15);
        }
        .zero {
          grid-column: 1/4;
        }
   <div class="numPad">
        <button value="1">1</button>
        <button value="2">2</button>
        <button value="3">3</button>
        <button value="4">4</button>
        <button value="5">5</button>
        <button value="6">6</button>
        <button value="7">7</button>
        <button value="8">8</button>
        <button value="9">9</button>
        <button value="0" class="zero">0</button>
    </div>

Answer 3

整个空间将使用grid-column: 1 / span 3;