描述列表默认垂直堆叠，可通过CSS改为水平排列：用display: inline-block实现轻量对齐，或用flex包裹每组<dt><dd>实现可控分组；禁用table或float以保语义与可访问性。
描述列表默认是垂直的，怎么改成水平排列
HTML 的 <dl> 元素天生是块级、垂直堆叠结构：每个 <dt> 和紧随其后的 <dd> 占一行，没有内建“水平”模式。所谓“水平描述列表”，本质是用 CSS 覆盖默认流式布局，常见做法是让 <dt> 和 <dd> 并排显示，或把整组 <dt><dd> 当作行内单元处理。
用 display: inline-block 实现基础水平对齐
这是最轻量、兼容性最好的方式，适合简单场景（如单行键值对展示）：
<dl class="dl-inline"> <dt>姓名</dt> <dd>张三</dd> <dt>城市</dt> <dd>杭州</dd> </dl>
CSS 部分只需两步：
-
<dt>和<dd>都设为display: inline-block，并指定固定宽度或最小宽度 - 清除
<dl>默认的上下 margin 和内部空白（margin: 0; line-height: 1.4;等） - 注意：
inline-block元素间存在空格间隙，建议 HTML 中<dt><dd>紧挨写，或用注释消除空白
用 flex 实现更可控的水平分组
当需要严格控制每组 <dt><dd> 水平排列、且多组换行时，推荐用 flex 套一层容器，而非直接作用于 <dl>：
立即学习“前端免费学习笔记（深入）”；
<dl class="dl-flex">
<div class="dl-group">
<dt>邮箱</dt>
<dd>user@example.com</dd>
</div>
<div class="dl-group">
<dt>电话</dt>
<dd>138-0013-8000</dd>
</div>
</dl>
对应 CSS：
.dl-flex { display: flex; flex-wrap: wrap; gap: 1em; }.dl-group { display: flex; align-items: center; gap: 0.5em; }- 这样每组独立成 flex 容器，
<dt>和<dd>自然水平对齐，且整体可折行 - 避免直接给
<dl>设display: flex—— 否则所有<dt>/<dd>会混排，语义断裂
为什么不能用 table 或 float 来模拟
虽然技术上可行，但不推荐：
-
<table>完全破坏<dl>的语义价值，屏幕阅读器无法识别“术语/定义”关系，SEO 也不友好 -
float已被废弃多年，清除浮动麻烦，响应式下极易错位，且<dt>/<dd>顺序在 DOM 中仍为垂直，不利于可访问性 - 现代项目应优先用
flex或grid，它们天然支持语义保留 + 布局控制
真正容易被忽略的是语义与样式的边界：水平排列只是视觉需求，<dl> 的核心价值在于表达“术语-定义”的逻辑关系。无论怎么改样式，都别动 DOM 结构顺序，也别为了对齐而把多个 <dd> 合并进一个标签里——那会让辅助技术完全无法理解内容层次。
