如何利用HTML的details标签展示具有多层级缩进的数据-html教程-PHP中文网

details标签不管理缩进，缩进须用data-level属性配合padding-inline-start等逻辑属性显式控制，以确保rtl、打印、高对比度及键盘导航下均一致；直接嵌套会导致缩进失效、点击穿透与open状态不同步。

如何利用html的details标签展示具有多层级缩进的数据

details 标签本身不管理缩进，只控制展开/折叠状态；缩进必须由 CSS 显式控制，且不能依赖 margin-left 这类物理方向属性——否则 RTL 页面、高对比度模式、打印样式全会错位。

为什么直接嵌套 `details` 会导致缩进失效

浏览器对嵌套的 details 不自动添加缩进，它只渲染语义结构。你看到“有缩进”，往往是父级 details 的 padding 或 margin 意外传递给了子级，或 CSS 选择器写成了 details details { margin-left: 20px; } 这种不可靠写法。

这种写法在 RTL 页面中会把内容推到屏幕外（margin-left 在 RTL 下仍往左推）
键盘导航时焦点顺序可能跳过中间层级（因脱离文档流）
打印 PDF 或启用高对比度模式时，缩进常消失——这些环境会重置大部分内联样式和物理方向属性

用 `data-level` + `padding-inline-start` 控制缩进

给每层 details 加上 data-level="1"、data-level="2" 等明确层级标记，CSS 用逻辑属性适配所有书写方向：

<details data-level="1"><summary>一级项</summary><details data-level="2"><summary>二级项</summary><p>内容</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </details></details>

CSS 写法：

[data-level="2"] { padding-inline-start: 1.5rem; }
[data-level="3"] { padding-inline-start: 3rem; }
[data-level="4"] { padding-inline-start: 4.5rem; }

padding-inline-start 在 LTR 下等价于 padding-left，在 RTL 下自动变成 padding-right，无需额外判断
避免用 transform: translateX() 或 position: relative 缩进——它们会让元素脱离文档流，破坏屏幕阅读器遍历顺序
不要用 ul 包裹 details 来“借”默认缩进，那会混淆语义（列表 ≠ 可折叠容器）