如何优化HTML复选框列表，避免换行文本出现在复选框下方

实现方案 #

你可以通过给包裹元素加CSS样式实现文本悬挂缩进的效果，以下是两种常用的可直接复用的方案：

方案1：Flex布局实现（兼容性好，写法简单） #

给每个<p>标签添加如下样式即可，align-items: flex-start是避免复选框和多行文本垂直居中的关键，如果你需要复选框和文本垂直居中可以改成center：

.check-item {
  display: flex;
  align-items: flex-start;
  margin: 8px 0; /* 可选，调整选项之间的间距 */
}
.check-item input[type="checkbox"] {
  margin-right: 8px; /* 复选框和文本之间的间距 */
  margin-top: 4px; /* 可选，微调复选框和文本的垂直对齐位置 */
  flex-shrink: 0; /* 防止复选框被压缩 */
}

修改后的完整HTML示例：

<style>
.check-item {
  display: flex;
  align-items: flex-start;
  margin: 8px 0;
}
.check-item input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 4px;
  flex-shrink: 0;
}
</style>

<p class="check-item"><input type="checkbox"> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</p>
<p class="check-item"><input type="checkbox"> We always provide people a complete solution focused of any business.Change in the volume of expected sales Change in the volume of expected sales </p>
<p class="check-item"><input type="checkbox"> Change in the volume of expected sales </p>
<p class="check-item"><input type="checkbox"> Change in the volume of expected sales </p>

方案2：padding+负缩进实现（不需要修改原有HTML结构） #

如果你不想调整现有HTML的标签结构，直接给p标签加如下样式即可：

p {
  padding-left: 24px; /* 缩进宽度，略大于复选框总宽度即可 */
  text-indent: -20px; /* 负缩进把第一行拉回原有位置 */
  margin: 8px 0;
}
p input[type="checkbox"] {
  margin-right: 8px;
}

两种方案都可以实现换行后文本和首行起始位置对齐的效果，不会出现文本对齐到复选框下方的问题。

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