CSS 我如何将这些复选框放入网格布局中

Question

我想在表格样式网格中设置这些复选框，而不使用 HTML 中的表格。我正在尝试 CSS，但似乎我需要为每个插槽的每个标签添加一个类。

有没有办法避免这种情况？

<div class = permissions_grid>
          <div class="column_labels"></div>
            <label>All Members</label>
            <label>Relevant Experience</label>
            <label>HUB Moderators</label>
            <label>Invited Members</label>
          </div>
          <div class="row_edit_documents">
            <label>Edit Documents</label>
            <input type="checkbox" class="all-D" name="edit_docs" value="all">
            <input type="checkbox" class="relevant" name="edit_docs" value="relevant">
            <input type="checkbox" class="moderators" name="edit_docs" value="moderators">
            <input type="checkbox" class="invited" name="edit_docs" value="invited" checked>
          </div>
          <div class = "row_add_categories">
            <label>Add Feedback Categories</label>
            <input type="checkbox" class="all-C" name="add_cat" value="all" checked>
            <input type="checkbox" class="relevant" name="add_cat" value="relevant">
            <input type="checkbox" class="moderators" name="add_cat" value="moderators">
            <input type="checkbox" class="invited" name="add_cat" value="invited">
          </div>
          <div class = "row_move_com_cat">
            <label>Move Comments and Categories</label>
            <span class="x">X</span>
            <input type="checkbox" class="relevant" name="move" value="relevant">
            <input type="checkbox" class="moderators" name="move" value="moderators" checked>
            <input type="checkbox" class="invited" name="move" value="invited" checked>
          </div> 
        </div>

第一行从位置 2 开始，我认为我可以在 CSS 中轻松标记。但是如何确保所有输入和标签的间距均匀？

谢谢

凯文

Answer 1

你可以使用 flexbox 来得到你想要的结果。

您可能在 HTML 中遇到了一些问题。

在你的 html 顶部你提前关闭了一个 div 标签。

<div class="column_labels"></div> <!-- EXTRA CLOSING DIV TAG HERE -->
  <label>All Members</label>
  <label>Relevant Experience</label>
  <label>HUB Moderators</label>
  <label>Invited Members</label>
</div>

.permissions_grid {
  display: flex;
  flex-flow: column nowrap;
}
.permissions_grid > div {
  display: flex;
  flex-flow: row nowrap;
  flex-basis: 20%;
  text-align: center;
}

.permissions_grid > div > * {
  flex: 1;
}

<div class=permissions_grid>
  <div>
    <label></label>
    <label>All Members</label>
    <label>Relevant Experience</label>
    <label>HUB Moderators</label>
    <label>Invited Members</label>
  </div>
  <div>
    <label>Edit Documents</label>
    <input type="checkbox" class="all-D" name="edit_docs" value="all">
    <input type="checkbox" class="relevant" name="edit_docs" value="relevant">
    <input type="checkbox" class="moderators" name="edit_docs" value="moderators">
    <input type="checkbox" class="invited" name="edit_docs" value="invited" checked>
  </div>
  <div>
    <label>Add Feedback Categories</label>
    <input type="checkbox" class="all-C" name="add_cat" value="all" checked>
    <input type="checkbox" class="relevant" name="add_cat" value="relevant">
    <input type="checkbox" class="moderators" name="add_cat" value="moderators">
    <input type="checkbox" class="invited" name="add_cat" value="invited">
  </div>
  <div>
    <label>Move Comments and Categories</label>
    <span class="x">X</span>
    <input type="checkbox" class="relevant" name="move" value="relevant">
    <input type="checkbox" class="moderators" name="move" value="moderators" checked>
    <input type="checkbox" class="invited" name="move" value="invited" checked>
  </div>
</div>