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

Question

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

有什么办法可以避免这种情况吗？

<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>

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

CSS How would I get these checkboxes into a grid layout

html

css

checkbox

css-grid