如何将HTML定义列表<dl>样式设置为两列表格？

嘿，我完全理解你想用<dl>实现语义化两列参考列表的需求——这确实比<table>更贴合术语-描述的语义场景。针对你遇到的三个问题，我整理了一套无需修改原有HTML结构的解决方案，用CSS Grid和现代选择器来搞定：

问题拆解与核心思路 #

• 换行落到
  下方：原来的浮动布局+clear: both会强制<dt>独占一行，改用CSS Grid可以将<dt>固定在左侧列，<dd>始终在右侧列内换行，不会跑到左侧。
• 无法移除每组最后一个
  的逗号：利用CSS的:has()选择器（现代浏览器支持）精准定位“后面紧跟的不是<dd>的<dd>”，也就是每组的最后一个<dd>，不给它添加逗号。
• 多
  对应一个
  时的逗号分隔：给同一组内的多个<dt>添加逗号，仅排除每组的最后一个<dt>。

修改后的SCSS代码 #

.b-references {
  border: 1px solid color(neutral, light);
  overflow: hidden;
  // 用Grid布局定义两列：左侧固定最小宽度，右侧自适应
  display: grid;
  grid-template-columns: minmax(16rem, auto) 1fr;
  gap: 0;
  align-items: center;
}

.b-references__term {
  clear: none;
  float: none;
  display: inline-block;
  font-weight: font-weight(bold);
  padding: 1rem;
  border-right: 1px solid color(neutral, light);
  border-bottom: 1px solid color(neutral, light);
  // 强制<dt>始终在左侧列
  grid-column: 1;

  // 处理多<dt>的逗号分隔：同一组内的非最后一个<dt>添加逗号
  &:not(:last-of-type):has(+ .b-references__term):after {
    content: ',';
    margin-left: .25rem;
  }

  // 移除最后一个<dt>的底部边框
  &:last-of-type {
    border-bottom: none;
  }
}

.b-references__item {
  float: none;
  padding: 1rem 0 1rem 1rem;
  border-bottom: 1px solid color(neutral, light);
  // 强制<dd>始终在右侧列
  grid-column: 2;

  // 给非组内最后一个<dd>添加逗号：后面不是<dt>的<dd>才加逗号
  &:not(:last-child):not(:has(+ .b-references__term)):after {
    content: ',';
    margin-right: .25rem;
  }

  // 同一组内的<dd>之间调整左内边距
  & + & {
    padding-left: 0;
  }

  // 移除最后一个<dd>的底部边框
  &:last-child {
    border-bottom: none;
  }
}

// 修复多<dt>场景下，第一个<dd>的左内边距
.b-references__term:last-of-type + .b-references__item {
  padding-left: 1rem;
}

关键修改说明 #

1. Grid布局实现两列结构：

   • 通过grid-template-columns: minmax(16rem, auto) 1fr定义左侧列最小宽度16rem，右侧列自适应剩余空间。
   • 用grid-column强制<dt>在左侧列、<dd>在右侧列，确保<dd>换行时始终在右侧区域，不会跑到<dt>下方。

2. 精准控制逗号显示：

   • 对于<dd>：&:not(:last-child):not(:has(+ .b-references__term))选择器，确保只有不是列表最后一个、且后面紧跟的不是<dt>的<dd>才显示逗号，完美解决每组最后一个<dd>的逗号移除问题。
   • 对于多<dt>：&:not(:last-of-type):has(+ .b-references__term)选择器，给同一组内（后面还是<dt>）的非最后一个<dt>添加逗号，实现同“单元格”内的术语分隔。

3. 边框样式优化：

   • 给<dt>和<dd>添加底部边框，代替原来的绝对定位边框，避免布局偏移问题；最后一个元素移除底部边框，保持视觉整洁。

如果需要兼容不支持:has()选择器的旧浏览器，可以通过JavaScript遍历<dl>元素，给每组最后一个<dd>和多<dt>组的最后一个<dt>添加专属类名，再通过类名控制逗号显示。

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