如何实现定义列表排版_DL与DT及DD标签构建术语解释表

顺亿

2026-10-22 • 👁 0人浏览过

和: 无强制换行，且; 默认有 margin-left: 40px，需重置样式才能获得清晰排版。为什么
不像
那样“好使” 因为浏览器对
的默认样式极简，甚至有些老版本 Chrome 会把

和

挤在同一行，看起来像没换行。这不是你写错了，是规范本就没规定必须换行 —— 它只定义语义：一个术语（

）对应一个或多个解释（

）。常见错误现象：

文字紧贴

左侧、缩进不一致、响应式下错位。根源常是没重置

margin

或忽略

的默认左外边距（多数浏览器设为

40px

）。别用

display: block

强行“修复”

—— 它本来就是块级，问题在盒模型

默认有

margin-left

，清掉它再统一控制间距更可控一个

后可跟多个

（比如同义词+例句），别硬套“一对一”结构

排版最简可用 CSS 写法不依赖框架、不改 HTML 结构，三行 CSS 就能获得清晰术语表：

dl { margin: 0; }
dt { font-weight: 600; margin-top: 1rem; }
dd { margin: 0 0 0.5rem 0; }

这个写法直击痛点：

dl

清除全局 margin 防止意外留白；

dt

加粗并设

margin-top

划分条目；

dd

清掉默认左缩进，只留底部间距。比用

display: flex

更兼容旧浏览器，也避免因

flex

导致的换行异常。若需术语左对齐、解释右对齐（类似字典），用

display: grid

更稳妥：

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 1rem; }

，然后

dt { grid-column: 1; }

、

dd { grid-column: 2; }

移动端想让术语换行顶格？加

dt { width: 100%; }

即可，不用媒体查询别给

设

line-height

—— 它不继承，得分别设在

dt

dd

上嵌套与多义术语的 HTML 结构陷阱遇到一个术语有多个解释层级（比如“闭包”先定义，再分“内存机制”“作用域链”两个子点），容易误写成：


  闭包
  函数与其词法环境的组合
  内存机制
 
  …

正确做法是用嵌套

：


  闭包
  
    函数与其词法环境的组合
    
      内存机制
      …
      作用域链
      …

内可放任意流内容（

、

、甚至另一个

），但

只能直接子元素于

不要为了“视觉缩进”而在

里塞

—— 语义已由嵌套表达，样式交给 CSS 屏幕阅读器会按嵌套层级播报，嵌套过深（>2 层）会影响理解，优先拆分成多个平级

当设计稿要求“带图标/编号”的术语表时设计师给的图里每个

前有问号图标或数字序号，但

本身不支持伪元素精准定位到术语前（

::before

在

内部，可能被内联元素打断）。稳妥方案是显式添加：

❓ 闭包

或者用 CSS 自定义属性控制编号：

dl[data-numbered] { counter-reset: term; }
dl[data-numbered] dt::before {
  content: counter(term) ". ";
  counter-increment: term;
  font-weight: bold;
}

用

aria-hidden="true"

标记装饰性图标，避免读屏重复播报编号用 CSS counters 而非

套

—— 会破坏语义，且

结构无法被所有读屏器识别为术语表图标尺寸建议用

em

单位，随

字体大小缩放，避免固定

px

在缩放页面时错位实际项目里最容易被忽略的是：把

当作视觉容器去“画表格”，而忘了它本质是描述性列表。语义对齐了，样式只是收尾；语义歪了，CSS 再多技巧也救不回可访问性和 SEO 效果。

相关文章