如何在Flexbox列表项中对齐复选框与段落文本，避免边距干扰？

核心问题分析 #

你遇到的复选框位置偏移，是因为<p>标签的margin-top:1em让内容块的顶部到第一行文字有间距，而align-items:flex-start会让复选框和内容块的顶部（而非文字顶部）对齐，导致复选框跑到了<p>的上边距区域。

具体修复方案 #

以下是两种可行的CSS调整方式，任选其一即可：

方案1：通过对齐基线匹配文字位置

直接修改flex容器的对齐方式，让复选框和内容的第一行文字基线对齐，完美匹配原生项目符号的视觉位置：

/* 移除列表默认项目符号 */
.task-list-item {
  list-style: none;
  margin: 0;
}

/* 控制复选框与内容的布局 */
.task-list-item > div {
  display: flex;
  align-items: baseline; /* 替换flex-start，让复选框和第一行文字基线对齐 */
  gap: 0.6em; /* 控制复选框与内容的间距，和原生项目符号间距一致 */
}

/* 保持嵌套列表的缩进（可选，还原原生列表层级感） */
.task-list-item ul {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

方案2：通过margin-top匹配<p>的上边距

如果偏好使用align-items:flex-start，可以给顶级复选框设置与<p>一致的margin-top，让它和<p>的第一行文字对齐：

.task-list-item {
  list-style: none;
  margin: 0;
}

.task-list-item > div {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}

/* 顶级复选框匹配p的上边距 */
.task-list-item > div > input[type="checkbox"] {
  margin-top: 1em; /* 和你的p标签margin-top值一致 */
}

/* 嵌套项的复选框不需要margin-top（因为没有p标签） */
.task-list-item .task-list-item > div > input[type="checkbox"] {
  margin-top: 0;
}

.task-list-item ul {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

效果说明 #

两种方案都能让复选框替代原生项目符号，且位置与文字对齐，同时保留嵌套列表的层级缩进，还原你想要的视觉效果。

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