我怎样才能将第三个和第四个li按钮放在同一列中

Question

我正在尝试使用 4x5 网格，但我希望按钮 3 和 4 适合一列，但无法弄清楚如何实现。我尝试过针对这些单独的项目但没有成功 可以帮忙吗

我已经删除了 css 和 html 的图像并插入了代码。我不太使用 stackoverflow，所以如果我不遵守规则，我深表歉意

.container {
  display: grid;
  width: 400px;
  height: 500px;
  border: 1px solid black;
  margin: 50px auto;
  padding: 10px;
  font-weight: 200;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
  border-radius: 10px;
  text-align: center;
}
div.buttons ul.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4 1fr);
}

/* Target the C and CE buttons to span half of their respective column */
ul.buttons li:nth-child(3) button,
ul.buttons li:nth-child(4) button {
  grid-column: 3 / 5; /* Start at column line 3 and end at line 5 */
}

ul li button {
  font-size: 1rem; /* Adjust as needed */
  font-weight: bold; /* Adjust as needed */
  padding: 15px;
  margin: 5px; /* Adjust as needed */
  border: none;
  border-radius: 10px;
}
//html
 <div class="container">
      <h1>Calculator</h1>
      <div class="input-box">
        <input type="text" placeholder="0" />
      </div>
      <div class="buttons">
        <ul class="buttons">
          <li><button type="button" class="openBracket">(</button></li>
          <li><button type="button" class="closeBracket">)</button></li>
          <li><button type="button" class="c">C</button></li>
          <li><button type="button" class="ce">CE</button></li>
          <li><button type="button" class="divide">%</button></li>
          <li><button type="button" class="7">7</button></li>
          <li><button type="button" class="8">8</button></li>
          <li><button type="button" class="9">9</button></li>
          <li><button type="button" class="x">X</button></li>
          <li><button type="button" class="4">4</button></li>
          <li><button type="button" class="5">5</button></li>
          <li><button type="button" class="6">6</button></li>
          <li><button type="button" class="minus">-</button></li>
          <li><button type="button" class="1">1</button></li>
          <li><button type="button" class="2">2</button></li>
          <li><button type="button" class="3">3</button></li>
          <li><button type="button" class="plus">+</button></li>
          <li><button type="button" class="0">0</button></li>
          <li><button type="button" class="dot">.</button></li>
          <li><button type="button" class="divide">/</button></li>
          <li><button type="button" class="equal">=</button></li>
        </ul>
      </div>
    </div>

Answer 1

根据您的结构，您的 CSS 网格应该是 8 列而不是 4 列。除了您需要的两列之外，只需将每个按钮设置为 2 列即可。

另请注意，类名称不应以（或只是）数字开头

.container {
  display: grid;
  width: 400px;
  //height: 500px;
  border: 1px solid black;
  margin: 50px auto;
  padding: 10px;
  font-weight: 200;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
  border-radius: 10px;
  text-align: center;
}

div.buttons ul.buttons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4 1fr);
  list-style: none;
  gap: .25em;
}

ul.buttons li {
  grid-column: span 2;
}

ul.buttons li:nth-child(3),
ul.buttons li:nth-child(4) {
  grid-column: span 1;
}

ul li button {
  font-size: 1rem;
  /* Adjust as needed */
  font-weight: bold;
  /* Adjust as needed */
  padding: 15px;
  margin: 5px;
  /* Adjust as needed */
  border: none;
  border-radius: 10px;
  width: 100%;
}

<div class="container">
  <h1>Calculator</h1>
  <div class="input-box">
    <input type="text" placeholder="0" />
  </div>
  <div class="buttons">
    <ul class="buttons">
      <li><button type="button" class="openBracket">(</button></li>
      <li><button type="button" class="closeBracket">)</button></li>
      <li><button type="button" class="c">C</button></li>
      <li><button type="button" class="ce">CE</button></li>
      <li><button type="button" class="divide">%</button></li>
      <li><button type="button" class="7">7</button></li>
      <li><button type="button" class="8">8</button></li>
      <li><button type="button" class="9">9</button></li>
      <li><button type="button" class="x">X</button></li>
      <li><button type="button" class="4">4</button></li>
      <li><button type="button" class="5">5</button></li>
      <li><button type="button" class="6">6</button></li>
      <li><button type="button" class="minus">-</button></li>
      <li><button type="button" class="1">1</button></li>
      <li><button type="button" class="2">2</button></li>
      <li><button type="button" class="3">3</button></li>
      <li><button type="button" class="plus">+</button></li>
      <li><button type="button" class="0">0</button></li>
      <li><button type="button" class="dot">.</button></li>
      <li><button type="button" class="divide">/</button></li>
      <li><button type="button" class="equal">=</button></li>
    </ul>
  </div>
</div>