除了 HTML 表格元素之外，还有哪些其他选项可以有序地放置多个复选框？ [关闭]答案

【问题标题】：What other options are there available to position several checkboxes in an orderly manner except for the HTML table element? [closed]除了 HTML 表格元素之外，还有哪些其他选项可以有序地放置多个复选框？ [关闭]
【发布时间】：2023-03-29 03:16:01
【问题描述】：

我想知道 HTML 表格元素是否仍然是最新的以有序地定位多个复选框输入字段，或者是否有更多最新选项可用，例如使用 css 或其他 html 元素？

这是我的例子：

<table>
  <tr>
    <td><label for="grade1">Grade 1</label></td>
    <td><input type="checkbox" name="grade1" id="grade1" checked></td>
  </tr>
  <tr>
    <td><label for="grade2">Grade 2</label></td>
    <td><input type="checkbox" name="grade2" id="grade2"></td>
  </tr>
  <tr>
    <td><label for="grade3">Grade 3</label></td>
    <td><input type="checkbox" name="grade3" id="grade3"></td>
  </tr>
  <tr>
    <td><label for="grade4">Grade 4</label></td>
    <td><input type="checkbox" name="grade4" id="grade4"></td>
  </tr>
  <tr>
    <td><label for="grade5">Grade 5</label></td>
    <td><input type="checkbox" name="grade5" id="grade5"></td>
  </tr>
  <tr>
    <td><label for="grade6">Grade 6</label></td>
    <td><input type="checkbox" name="grade6" id="grade6"></td>
  </tr>
  <tr>
    <td><label for="grade8">High school</label></td>
    <td><input type="checkbox" name="grade8" id="grade8"></td>
  </tr>
</table>

【问题讨论】：

标签： html css forms checkbox

【解决方案1】：

一种选择是使用 css 网格来实现类似的布局。

.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px;
}

<div class="grid">
  <label for="grade1">Grade 1</label>
  <input type="checkbox" name="grade1" id="grade1" checked>
  <label for="grade2">Grade 2</label>
  <input type="checkbox" name="grade2" id="grade2">
  <label for="grade3">Grade 3</label>
  <input type="checkbox" name="grade3" id="grade3">
  <label for="grade4">Grade 4</label>
  <input type="checkbox" name="grade4" id="grade4">
  <label for="grade5">Grade 5</label>
  <input type="checkbox" name="grade5" id="grade5">
  <label for="grade6">Grade 6</label>
  <input type="checkbox" name="grade6" id="grade6">
  <label for="grade8">High school</label>
  <input type="checkbox" name="grade8" id="grade8">
</div>

【讨论】：