如何让复选框与自定义行高的多行文本顶部对齐？

嘿，这个问题我之前折腾过！你用inline-grid的方向是对的，只需要加一行属性就能搞定顶部对齐，完全不用靠固定margin来偏移～

问题出在默认的网格项对齐方式上，默认情况下grid容器里的元素会垂直居中，所以你的复选框才会和多行文本的中间对齐。只需要给.checkbox容器加上align-items: start，就能让复选框和文本的第一行顶部对齐了。另外用grid的gap属性来代替input的margin-right会更符合布局规范，也更灵活。

修改后的CSS代码是这样的：

.checkbox {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: start; /* 核心：让网格项顶部对齐 */
  gap: 10px; /* 替代margin-right，控制复选框和文本的间距 */
  line-height: 2;
}

HTML部分保持不变就行：

<div style="max-width: 200px">
  <div class="checkbox">
    <input type="checkbox" />
    <label>
      Here is some text that wraps over multiple lines.
    </label>
  </div>
</div>

如果你更习惯用flex布局，其实也能实现同样的效果，代码差不多：

.checkbox {
  display: inline-flex;
  align-items: start;
  gap: 10px;
  line-height: 2;
}

这两种方式都能自适应文本的行高变化，不用手动调整偏移量，完美解决你的需求😉

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