如何用CSS实现Checkbox与段落文本对齐，使换行文本左对齐

以下几种方法都能实现你要的「复选框与段落同行，段落换行后从容器左侧对齐」的效果：

方法1：使用Grid布局（推荐） #

Grid是最直观的现代布局方案，能精准控制列宽，代码简洁：

<div class="checkbox-group">
  <input type="checkbox" id="option1">
  <p>这里是需要换行的长段落文本，当内容超出容器宽度时，换行后的内容会自动从容器左侧开始对齐，不会在复选框下方缩进。</p>
</div>

.checkbox-group {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列自适应复选框宽度，第二列占满剩余空间 */
  gap: 8px; /* 复选框与文本的间距，可按需调整 */
  align-items: start; /* 让复选框与文本顶部对齐 */
}

.checkbox-group p {
  margin: 0; /* 移除p标签默认的上下外边距，避免多余间距 */
}

方法2：绝对定位复选框（兼容旧浏览器） #

如果需要兼容不支持Grid的旧浏览器，可采用容器内边距+绝对定位的方式：

<div class="checkbox-group">
  <input type="checkbox" id="option2" class="checkbox">
  <p class="text">这里是需要换行的长段落文本，当内容超出容器宽度时，换行后的内容会自动从容器左侧开始对齐，不会在复选框下方缩进。</p>
</div>

.checkbox-group {
  position: relative;
  padding-left: 24px; /* 预留复选框的位置，值大于复选框宽度即可 */
}

.checkbox {
  position: absolute;
  left: 0;
  top: 2px; /* 调整复选框的垂直对齐位置，匹配文本基线 */
}

.text {
  margin: 0;
}

方法3：将复选框嵌入段落内 #

把复选框放在p标签内部，通过定位调整位置，让文本流自然对齐：

<p class="checkbox-text">
  <input type="checkbox" id="option3">
  这里是需要换行的长段落文本，当内容超出容器宽度时，换行后的内容会自动从容器左侧开始对齐，不会在复选框下方缩进。
</p>

.checkbox-text {
  position: relative;
  padding-left: 24px; /* 预留复选框位置 */
  margin: 0;
}

.checkbox-text input {
  position: absolute;
  left: 0;
  top: 2px; /* 调整垂直对齐 */
}

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