如何通过CSS解决自定义Checkbox下方文本错误换行问题？

自定义原生复选框样式后，长文本会错误换行到复选框下方，以下是纯CSS的修复方案，同时修正了HTML中重复ID的问题（ID必须唯一，否则label关联会失效）。

修复后的完整代码 #

CSS #

.container {
  width: 200px;
  background: lightgrey;
}

.form-group:not(:last-of-type) {
  margin-bottom: 16px;
  /* 核心修改：用flex布局让复选框和文本保持对齐 */
  display: flex;
  align-items: flex-start;
}

.form-group > input[type="checkbox"] {
  display: none;
}

.form-group > input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  /* 调整垂直对齐，让复选框和文本顶部对齐 */
  vertical-align: top;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border: 2px solid #9E9E9E;
  border-radius: 4px;
  flex-shrink: 0;
}

.form-group > input[type="checkbox"]:checked + label::before {
  box-sizing: border-box;
  padding-top: 2px;
  content: "\2714";
  color: white;
  text-align: center;
  background: #005DA1;
  border-color: #005DA1;
}

HTML #

<div class="container">
  <div class="form-group">
    <input type="checkbox" id="my-checkbox1"/>
    <label for="my-checkbox1">some label</label>
  </div>
  <div class="form-group">
    <input type="checkbox" id="my-checkbox2"/>
    <label for="my-checkbox2">some extremely long label that must be accounted for</label>
  </div>
</div>

关键修改说明 #

1. 给.form-group添加flex布局：设置display: flex; align-items: flex-start;，让复选框区域（伪元素）和文本标签成为flex容器内的项，文本换行时会在自身空间内排列，不会跑到复选框下方。
2. 调整伪元素的垂直对齐：将vertical-align: bottom改为vertical-align: top，让复选框和文本的顶部对齐，视觉上更协调。
3. 修正重复ID问题：HTML中两个复选框的ID不能重复，分别改为my-checkbox1和my-checkbox2，确保label和对应的复选框正确关联。

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