如何在不新增HTML元素的前提下实现<dl>列表中<dt>与<dd>的同行块状显示及定义左对齐

数据老陈

2026-5-1

嘿，这个需求用CSS Grid就能完美解决，完全不用加额外的HTML元素，而且刚好能满足<dd>始终左对齐的要求，我给你详细拆解下：

核心实现方案

直接给<dl>加上Grid布局的样式就行，代码非常简洁：

dl {
  display: grid;
  /* 第一列自动适配<dt>的内容宽度，第二列占满剩余空间 */
  grid-template-columns: auto 1fr;
  /* 可选：设置<dt>和<dd>的水平间距，以及行之间的垂直间距 */
  gap: 0.5rem 1.5rem;
}

/* 可选：给术语加点样式突出显示 */
dt {
  font-weight: 700;
}

为什么这个方案能满足你的所有要求？

无需额外HTML元素：完全基于原有的<dl>、<dt>、<dd>结构实现，不用套<div>或者其他标签。
始终左对齐：grid-template-columns: auto 1fr 让第一列（<dt>）的宽度随内容自动调整，第二列（<dd>）则统一占据剩余空间，所有<dd>的左侧自然就对齐在同一垂直线上，不管<dt>的内容是长是短，完全不用固定margin值。
同行显示每组术语和定义：Grid会自动把相邻的<dt>和<dd>分配到同一行的两列里，每组术语+定义自然就是同行的，多组的话会自动换行到下一行。