嘿，这个对齐问题我熟！要让每行的 icon、label 和 checkbox 整整齐齐不混乱，用 CSS Flexbox 或者 Grid 就能轻松搞定，给你两种实用方案：

这是最灵活的方案，适合大多数场景。给每一行的容器设置 Flex 布局，控制元素的垂直对齐和间距：

/* 每行的容器 */
.row-item {
  display: flex;
  align-items: center; /* 让所有元素垂直居中 */
  gap: 12px; /* 元素之间的间距，按需调整 */
  margin-bottom: 10px; /* 行与行之间的空隙 */
}

/* 让label占据中间剩余空间，避免文本长短打乱布局 */
.row-item .label {
  flex: 1;
  word-wrap: break-word; /* 长文本自动换行 */
}

/* 给icon设置固定尺寸，保证所有行的icon对齐一致 */
.row-item .icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

对应的HTML结构：

<div class="row-item">
  <span class="icon">📌</span>
  <span class="label">常规标签文本</span>
  <input type="checkbox" class="checkbox">
</div>
<div class="row-item">
  <span class="icon">🔔</span>
  <span class="label">这是一段很长很长的标签文本，测试一下换行后会不会影响整体对齐</span>
  <input type="checkbox" class="checkbox">
</div>

这样设置后，不管label文本长短，每行的icon、label、checkbox都会垂直居中，布局不会乱。

如果希望所有行的icon、label、checkbox都精准对齐在同一列（比如所有icon宽度完全一致，checkbox都靠右对齐），Grid是最佳选择：

/* 外层容器，统一管理所有行 */
.form-group {
  display: grid;
  grid-template-columns: 24px 1fr auto; /* 三列：固定宽度的icon列，占满空间的label列，自适应的checkbox列 */
  align-items: center;
  gap: 12px;
  row-gap: 10px; /* 行间距 */
}

HTML结构可以更简洁，不需要给每行单独加容器：

<div class="form-group">
  <span class="icon">📌</span>
  <span class="label">常规标签文本</span>
  <input type="checkbox">

  <span class="icon">🔔</span>
  <span class="label">这是一段很长很长的标签文本，测试一下换行后会不会影响整体对齐</span>
  <input type="checkbox">
</div>

Grid会自动把每三个元素划分为一行，而且所有icon列宽度统一，checkbox列也会整齐对齐，视觉上更规整。

• 自定义checkbox样式：浏览器默认的checkbox样式差异大，你可以用CSS自定义样式，保证跨浏览器一致性
• 避免inline元素的默认间距：如果用inline元素布局，记得去掉默认的margin/padding，或者用Flex/Grid消除这些影响

这样调整后，你的布局应该就能完美对齐啦！

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