如何实现<dt>与<dd>同行显示的<dl>定义列表样式？

完全不需要放弃<dl>元素，它的语义和你当前「术语+释义」的场景完全匹配，比改用<ul>更符合HTML语义规范。用CSS Grid可以极低成本实现你要的排版效果，完美解决浮动带来的行高错位、间距异常问题，还能自动适配dt内容换行、嵌套dl的场景。

实现代码 #

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  /* 行间距、dt与dd横向间距可按需调整 */
  gap: 0.2em 0.5em;
}

dt {
  font-weight: bold;
  grid-column: 1;
}

dd {
  grid-column: 2;
  /* 清除浏览器默认给dd添加的左外边距 */
  margin: 0;
}

/* 嵌套dl适配 */
dd > dl {
  width: 100%;
  margin: 0.3em 0 0 0;
}

方案优势 #

• 自动对齐dt和dd的第一行基线，不会出现浮动方案的行高错位问题
• dt内容过长换行时，dd内容只会在自身列区域展示，不会窜到dt下方
• 嵌套dl可完美继承布局逻辑，不需要额外写复杂的适配规则
• 间距完全由gap属性控制，不会出现浮动布局常见的margin塌陷问题

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