如何通过纯CSS实现Checkbox与Label每行单独排列（无需额外HTML标签）

没问题！要让每个复选框和对应的标签单独成一行（也就是每组占一行），而且不用添加任何额外的HTML标签，纯CSS就能轻松搞定。这里有几个实用的方案，你可以根据浏览器兼容性需求选择：

方案1：Grid布局（现代浏览器首选，代码最简洁） #

Grid布局天生适合这种成对元素的排列，代码少且易维护：

.list {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列自适应复选框宽度，第二列占剩余空间 */
  gap: 8px 12px; /* 控制组内水平间距和组间垂直间距 */
  align-items: center; /* 让复选框和标签垂直居中对齐 */
}

原理：Grid会自动将.list下的子元素（input和label）依次填入两列的网格中，自然形成每行一个复选框加一个标签的布局。

方案2：浮动布局（兼容性最好，支持旧浏览器） #

如果需要兼容IE这类旧浏览器，浮动方案是最稳妥的：

.list input {
  float: left;
  margin-right: 12px; /* 复选框和标签之间的间距 */
  clear: left; /* 强制每个复选框都从新行开始 */
}
.list label {
  display: block;
  padding-top: 2px; /* 微调垂直对齐，让标签和复选框居中 */
  margin-bottom: 8px; /* 组与组之间的垂直间距 */
}

原理：通过float: left让复选框靠左，clear: left确保每个复选框不会和上一个元素在同一行，标签设为块级元素后会自动换行到复选框右侧并占据整行剩余空间。

方案3：Flexbox布局（灵活可控） #

Flexbox也能实现，写法更灵活，适合需要自定义对齐方式的场景：

.list {
  display: flex;
  flex-wrap: wrap;
}
.list input {
  flex: 0 0 auto; /* 复选框宽度自适应 */
  margin-right: 12px;
  align-self: center;
}
.list label {
  flex: 1 0 calc(100% - 32px); /* 标签占剩余宽度，确保自动换行 */
  margin-bottom: 8px;
}

原理：利用flex-wrap: wrap让元素在空间不足时换行，通过flex属性控制复选框和标签的宽度占比，实现每组单独成行的效果。

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