如何对齐绝对定位HTML元素的基线，实现段落侧边标签与首行文本正确对齐

解决方案 #

你可以通过放弃绝对定位、利用CSS文本缩进和行内元素原生的基线对齐规则实现需求，完全不需要JS或hack实现。

修正后的CSS代码

.labeled {
  margin-left: 40px;
  text-indent: -40px; /* 首行反向缩进，将标签拉到左侧边距区域 */
}

.labeled::before {
  display: inline-block;
  content: attr(data-label);
  width: 40px; /* 宽度和缩进值、左侧边距值保持一致 */
  vertical-align: baseline; /* 默认值就是baseline，显式标注更易维护 */
  /* 如果需要标签在边距内右对齐，取消下面一行的注释即可 */
  /* text-align: right; */
}

你的HTML代码不需要做任何修改。

实现原理

• 原有方案用绝对定位让伪元素脱离了正常文本流，无法和首行文本的行盒基线关联，所以上标撑高行盒后就会出现错位问题。
• 调整后伪元素属于首行的行内元素，和首行第一个文本共用同一个行盒的基线对齐规则，不管首行因为上标、行高调整等原因变高多少，标签都会自动和首行文本保持基线对齐。
• 负的text-indent仅作用于首行，刚好把宽度为40px的标签偏移到左侧边距区域，其余行的文本仍然保持40px的左侧缩进，完全符合列表项标签的展示效果。

内容的提问来源于stack exchange，提问作者Gro-Tsen