如何仅用CSS实现div内Input与多行文本对齐（不修改HTML）

方案一：绝对定位+内边距 #

通过给父容器设置左侧内边距预留复选框位置，再将复选框绝对定位到该区域，让所有文本行自然缩进对齐：

div {
  position: relative;
  padding-left: 22px; /* 根据复选框尺寸调整，留出足够空间 */
  line-height: 1.5; /* 可选，优化文本行高，提升对齐视觉效果 */
}

div input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 2px; /* 微调垂直位置，让复选框与文本第一行基线对齐 */
}

方案二：CSS Grid布局 #

利用网格布局将复选框和文本划分为两栏，文本会在第二栏内自动换行，天然实现所有行与复选框对齐：

div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px; /* 控制复选框与文本的间距 */
  align-items: start; /* 让复选框与文本顶部对齐 */
}

两种方案都能让复选框与多行文本的所有行保持左侧对齐一致，完全不需要改动原有HTML结构。

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