details默认为块级元素，需用CSS改为inline-block或flex；summary需重置margin和min-height以适配菜单布局与触控需求。
details元素默认是块级元素，会独占一行
只要没做样式干预，<details> 渲染出来就是块级（display: block），不管里面内容多短，它都会撑满父容器宽度、强制换行。这在导航栏、侧边菜单里特别碍事——你想让它 inline 排列，它偏要“站成一排”。
常见现象：多个 <details> 并列写在 <nav> 或 <div class="menu"> 里，结果竖着堆成一列，完全不像菜单。
- 解决办法很简单：加一行 CSS，改成
display: inline-block或display: inline-flex - 如果需要响应式对齐（比如小屏堆叠、大屏横排），建议用
display: flex配合父容器控制 - 注意：改
display后，<summary>的点击区域可能变窄，建议显式设置padding或min-width
summary标签默认有 margin-bottom，导致菜单项间距不均
<summary> 在 Chrome/Firefox 中自带 margin-bottom: 1em（或类似值），在横向菜单里会把下一条目往下顶，造成视觉错位。这不是 bug，是浏览器 UA 样式默认行为。
- 必须重置：
summary { margin: 0; }是最安全的起点 - 如果用了
display: flex父容器，margin-bottom可能触发主轴外的意外偏移，此时仅清margin-bottom不够，得清全部margin - 别依赖
line-height去“撑高” summary，它不影响折叠/展开逻辑，但会影响点击热区高度
details嵌套时，子菜单缩进和箭头方向容易混乱
用 <details> 实现二级菜单时，很多人直接套一层 <details> 在 <details> 内部，结果发现子项的三角箭头朝向不对、缩进层级错乱，甚至点一级菜单时两级一起收起。
立即学习“前端免费学习笔记（深入）”；
- 根本原因：浏览器原生
<summary>箭头是通过伪元素::marker或::-webkit-details-marker控制的，无法跨层级继承样式 - 必须手动重置子级
summary的箭头：details details summary::marker { content: "▸"; }（或用 background-image） - 缩进靠 padding-left 控制，但别用
text-indent—— 它对<summary>无效，且可能影响可访问性 - 展开状态靠
details[open]选择器控制，嵌套时务必加层级限定，比如details > details[open]，否则样式会污染到所有子 details
移动端 touch 区域太小，折叠菜单点不中
在手机上，<summary> 默认尺寸经常小于 44×44px，iOS 和 Android 都会判定为“难点击”，尤其当它文字很短（比如只写“☰”）时。
- 必须设置
summary { min-height: 44px; padding: 0 12px; }，确保触控热区达标 - 避免用
font-size: 0+background-image模拟箭头——这样会让 screen reader 读不到“展开/收起”语义 - 不要给
<summary>加cursor: pointer就以为交互已完备；真正在意体验的话，得补上touch-action: manipulation
summary { margin: 0; } 和 min-height 这两条——它们不报错，但会让整个菜单结构在不同设备上表现不一致。 
