如何实现定义列表中不同字号标题与描述文本的基线对齐？

嗨，这个问题我之前做项目的时候正好碰到过！要让不同字号的dt（年份标题）和dd（描述文本）实现基线对齐，其实只需要调整下CSS的布局属性就行，我给你具体拆解两种靠谱的实现方式：

方法一：用inline-block + vertical-align（兼容旧浏览器） #

原来的float布局会让元素顶部对齐，我们可以把dt和dd改成inline-block元素，再通过vertical-align: baseline强制它们基线对齐，具体代码如下：

dl {
  font-size: 0; /* 消除inline-block元素之间的默认空白间隙 */
  margin: 0;
  padding: 0;
}
dt {
  font-size: small;
  display: inline-block;
  vertical-align: baseline;
  margin-right: 10px; /* 给年份和描述之间加个小间距 */
}
dd {
  font-size: large;
  display: inline-block;
  vertical-align: baseline;
  width: calc(100% - 70px); /* 可选：限制宽度触发换行测试效果 */
  margin: 0 0 10px 0; /* 给每组条目加垂直间距 */
  padding: 0;
}

这种方式的好处是兼容性好，哪怕是比较旧的浏览器也能正常工作。设置dl { font-size: 0; }是为了消除HTML里dt和dd之间的换行/空格带来的空白间隙，之后再给dt和dd单独设置字号就不会受影响。当dd文本换行时，dt会自动和dd的第一行文本基线对齐，完全符合你的需求。

方法二：用Flex布局（现代项目首选） #

如果你的项目只需要兼容现代浏览器，那Flex布局会更简洁，不用处理烦人的空白间隙问题：

dl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px; /* 第一个值是垂直间距，第二个是水平间距 */
  margin: 0;
  padding: 0;
}
dt {
  font-size: small;
  flex-shrink: 0; /* 防止年份标题被压缩 */
}
dd {
  font-size: large;
  flex: 1; /* 让描述文本占满剩余空间 */
  margin: 0;
  padding: 0;
}

Flex布局下，当flex项是单行文本时，浏览器会自动将它们的基线对齐；如果是多行dd文本，会自动和第一行基线对齐。gap属性可以直接控制dt和dd之间的水平间距，以及每组条目之间的垂直间距，代码更清爽易维护。

你可以根据自己的项目兼容性需求选其中一种方法试试，亲测都能完美解决基线对齐的问题～

内容来源于stack exchange