多行summary标题导致marker错位，如何确保其合理定位？

你可以通过调整<summary>的布局方式来解决这个问题，推荐使用Flex布局来控制marker和标题的对齐关系，具体实现如下：

• 给<summary>设置Flex布局，同时控制元素的垂直对齐方式
• 让内部的<h3>占据剩余空间，实现自然换行

summary {
  display: flex;
  align-items: flex-start; /* marker与标题顶部对齐，也可改为center实现居中对齐 */
  gap: 0.5rem; /* 给marker和标题之间添加间距，提升可读性 */
  cursor: pointer; /* 保持点击交互的提示 */
}

summary h3 {
  flex: 1; /* 让标题占据summary的剩余宽度，自动换行 */
  margin: 0; /* 清除h3默认的上下外边距，避免布局偏移 */
}

这个方案的优势在于：Flex布局会将默认的展开/折叠marker和<h3>放在同一布局上下文里，无论标题换行多少行，marker都会稳定保持在标题的左侧（顶部或居中位置，取决于你设置的align-items值），不会出现跳转到标题上方的问题。

如果需要自定义marker样式，也可以隐藏默认marker，用伪元素实现：

summary {
  list-style: none; /* 隐藏默认marker */
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

/* 兼容部分浏览器的默认marker隐藏 */
summary::marker {
  display: none;
}

/* 自定义展开状态的marker */
summary::before {
  content: "▸";
  font-size: 1.2rem;
  transition: transform 0.2s;
}

/* 折叠状态的marker旋转效果 */
details[open] summary::before {
  transform: rotate(90deg);
}

这样自定义的marker同样会跟着Flex布局保持稳定位置，不受标题换行影响。

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