详细信息（显示/隐藏）按钮在一行，但展开后在新行中

Question

我有一个列表，其中几乎每个条目都有一个“详细信息”按钮。目前看起来是这样的：

    .spoiler {display:inline;margin: 1px;}
    details[open] > summary {}
    summary {cursor:pointer;font-size:14px;}
    summary:focus {box-shadow: none !important;}
    summary > p {display:inline;}

 <ol>
  <li>Apple</li>
  <details class="spoiler" style="display:inline;border: 1px solid #aaa;border-radius: 4px;padding: 2px;">
<summary>
<b>more...</b>
</summary> <img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" width="100px"></details>
  <li>Banana</li>
  <li>Orange</li>
</ol> 

不幸的是，这些按钮占用了大量的垂直空间，并且在结构化列表中看起来很难看。我希望它们移至每个项目符号文本的末尾。然后，当按下时，将在新行中显示隐藏的内容；如果再次按下，则隐藏回来。类似这样的东西：

示例

可能吗？非常感谢您的帮助。谢谢你。

Answer 1

稍微重新排列 HTML 以符合标准，并使

details

元素成为

li

的子元素。

.spoiler {
  display: inline-block;
  vertical-align: top;
  margin: 1px;
}

details[open]>summary {}

summary {
  cursor: pointer;
  font-size: 14px;
}

summary:focus {
  box-shadow: none !important;
}

summary>p {
  display: inline;
}

<ol>
  <li>Apple
    <details class="spoiler">
      <summary>
        <b>more...</b>
      </summary> <img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" width="100px"></details>
  </li>
  <li>Banana</li>
  <li>Orange</li>
</ol>