GitHub 可扩展列表不合适

Question

从图中可以看出，GitHub 上可扩展部分的文本位置不合适。 （屏幕截图取自随机存储库的 README.md 文件）

预期行为：

文本应与小箭头显示在同一行。

Gitlab 上并非如此。看来这个 bug 影响了 GitHub 上的每个 Markdown 文件。

代码：

<details>
  <summary><h2>👾 I found a bug OR I would like to suggest a new feature</h2></summary>

blabla

</details>

<details>
  <summary><h2>👨‍💻 I want to contribute to this project</h2></summary>

blabla

</details>

Answer 1

您可能无法按照您想要的方式进行操作。 GitHub 有严格的限制来限制任意样式。

我不是 CSS 专家，但看起来包裹在

<div class="markdown-heading">

标签周围的

<h2>

是罪魁祸首。使用浏览器的开发工具添加

style="display: inline;"

使其在折叠/展开图标旁边呈现标题，如下所示：

但我认为您无法以编程方式设置该样式，特别是因为它是在渲染过程中添加到标题周围的。

Gitlab 上不是这样的

确实如此，但 GitLab 的方法还有另一个问题（与上面被黑的 GitHub 版本共享的问题）：

当您将鼠标悬停在用于展开该部分的三角形上时，该三角形会覆盖一个链接图标，因此很难实际展开该部分。 （单击标题而不是三角形确实有效，但看起来您应该单击三角形。）

我认为，如果标题应该位于

<summary>

标签内，则需要以不同的方式处理链接图标。

我的解决方案是将标题完全移到

<details>

标签之外，并使用其他内容作为

<summary>

文本：

## 👾 I found a bug OR I would like to suggest a new feature

<details>
  <summary>Learn how</summary>

blabla

</details>