HTML中summary标签样式问题：嵌套p标签致箭头与文本错位

当你在<summary>内嵌套<p>、标题这类块级元素时，浏览器默认的展开箭头会和文本错位——原因是块级元素默认独占一行，且自带边距，打破了<summary>内部的垂直对齐逻辑。以下是几种解决方法：

• 方案1：直接给

  设置样式（推荐）
  不需要嵌套额外标签，直接把样式应用在<summary>本身上，浏览器会自动让箭头和文本保持对齐：

  <details>
    <summary style="font-size:20px">Example</summary>
    Inside text
  </details>
  

• 方案2：修改嵌套元素的显示模式
  如果必须嵌套块级元素，把嵌套元素改成行内块级，并清除默认边距，避免独占一行：

  <details>
    <summary>
      <p style="font-size:20px; display: inline-block; margin: 0;">Example</p>
    </summary>
    Inside text
  </details>
  

• 方案3：自定义箭头样式
  隐藏浏览器默认箭头，用CSS伪元素自定义箭头，这种方式不受嵌套元素影响，灵活性更高：
  先定义CSS：

  summary {
    list-style: none; /* 移除默认箭头 */
  }
  summary::before {
    content: "▶"; /* 设置展开前的箭头 */
    margin-right: 8px;
    font-size: 20px; /* 和文本大小匹配 */
  }
  /* 展开后切换箭头样式 */
  details[open] summary::before {
    content: "▼";
  }
  

  对应的HTML代码：

  <details>
    <summary>
      <p style="font-size:20px">Example</p>
    </summary>
    Inside text
  </details>
  

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