如何实现网格布局中带标签首行复选框与其余行对齐

对齐异常由三个问题共同导致：

• 布局逻辑分裂：首行带标签的复选框放在ul弹性容器内，下方无标签的复选框放在.checkboxes普通文档流容器中，两套容器没有统一的宽度、间距约束，复选框位置没有对齐基准。
• 列宽不固定：原有li元素未设置固定宽度，宽度完全随内部label文本长度变化，四个标签文本长度不一致直接导致每个li宽度不同，内部复选框位置随容器宽度偏移，和下方固定左右边距的复选框无法对齐。
• HTML结构错误：<center>标签错误写在</head>标签前且未闭合，.checkboxes容器也未写闭合标签，会触发浏览器怪异渲染，加剧错位问题。

统一所有列的布局规则，废弃两套容器分离的写法，给每列设置固定宽度，保证同列所有复选框垂直居中对齐即可，完整可运行代码如下：

<head>
<style>
/* 统一盒模型，避免宽度计算偏差 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 行容器：水平排列所有列 */
.checklist-row {
  display: flex;
  justify-content: center;
}
/* 列容器：固定宽度，列内元素垂直排列居中 */
.checklist-col {
  width: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 标签样式 */
.checklist-col label {
  text-align: center;
  margin-bottom: 6px;
}
/* 统一复选框上下间距 */
.checklist-col input[type="checkbox"] {
  margin: 10px 0;
}
</style>
</head>
<body>
<br><br><br>
<div class="checklist-row">
  <div class="checklist-col">
    <label>Inspect</label>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
  <div class="checklist-col">
    <label>Repair</label>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
  <div class="checklist-col">
    <label>New Part</label>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
  <div class="checklist-col">
    <label>Unit Exch</label>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
</div>
</body>

• 移除原代码中ul/li、独立.checkboxes容器的分裂布局，改用「行+列」的统一弹性布局，所有复选框归到对应列下，从结构上保证同列元素垂直对齐。
• 给每列设置固定宽度，列内元素（标签、复选框）统一居中对齐，标签文本长度不会再影响列宽和复选框位置。
• 移除原代码给复选框设置的左右margin，靠固定列宽控制列之间的间距，避免边距累加导致的位置偏移。
• 修复原代码中未闭合的标签错误，新增全局盒模型规则，消除渲染异常隐患。

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