CSS Grid布局中，如何将复选框子标签对齐至主标签下方？

你现在的两列Grid布局会把复选框的标签拆分到不同列，导致排版混乱。要实现主复选框在上、子复选框对齐到其下方的效果，可按以下方式修改HTML和CSS：

修改后的HTML代码 #

<!-- HTML -->
<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
    
    <!-- 把复选框组包裹在单独容器中 -->
    <div class="checkbox-group">
        <label><input id="topList" name="list" type="checkbox"> Main Label</label>
        <label class="sub-checkbox"><input id="list1" name="list" type="checkbox"> First Sub Label</label>
        <label class="sub-checkbox"><input id="list2" name="list" type="checkbox"> Second Sub Label</label>
        <label class="sub-checkbox"><input id="list3" name="list" type="checkbox"> Third Sub Label</label>
    </div>
</div>

修改后的CSS代码 #

/* CSS */
div.settings {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 5px;
    grid-auto-flow: row; /* 确保项目自动换行 */
}
div.settings label { 
    text-align: right; 
}
div.settings label:after { 
    content: ":"; 
}

/* 复选框组样式 */
div.settings .checkbox-group {
    grid-column: 1 / -1; /* 让容器占满Grid的整行 */
    margin-top: 10px; /* 和上方内容拉开间距 */
}

/* 主复选框标签调整 */
div.settings .checkbox-group > label:first-child {
    text-align: left; /* 左对齐，符合复选框常规排版 */
}
div.settings .checkbox-group > label:first-child:after {
    content: ""; /* 去掉主复选框标签后的冒号 */
}

/* 子复选框标签样式 */
div.settings .sub-checkbox {
    text-align: left;
    padding-left: 25px; /* 缩进实现对齐效果 */
}
div.settings .sub-checkbox:after {
    content: ""; /* 去掉子复选框标签后的冒号 */
}

实现说明 #

1. 将所有复选框标签包裹在.checkbox-group容器中，让它作为Grid布局的独立项目，通过grid-column: 1 / -1使其占满整行，避免被拆分到两列中
2. 调整复选框标签的样式：去掉多余的冒号，子复选框通过padding-left实现缩进对齐，符合你想要的层级效果
3. 原有输入框与标签的两列对齐逻辑不受影响

内容的提问来源于stack exchange，提问作者Tan