如何让details按钮与列表项同行，展开内容换行显示？

当然可以实现，只需要调整HTML结构和少量CSS就能达到你想要的效果。

核心思路 #

• 将每个details元素嵌套进对应的<li>标签内部，让"more..."按钮紧跟在列表文本末尾，避免单独占用垂直空间。
• 通过CSS控制details展开时，隐藏内容自动换行显示在新一行，同时保持按钮与列表文本在同一行。

修改后的代码 #

CSS

/* 让details与列表文本处于同一行 */
.spoiler {
  display: inline;
  margin-left: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 2px;
}

/* 展开时，让隐藏内容换行显示 */
.spoiler[open] > *:not(summary) {
  display: block;
  margin-top: 8px;
}

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

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

/* 优化列表项垂直间距，提升美观度 */
li {
  margin: 4px 0;
}

HTML

<ol>
  <li>
    Apple
    <details class="spoiler">
      <summary>more...</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>

关键说明 #

• 把details移入li内部，直接解决了按钮单独占行的问题，按钮会自然跟随在列表文本之后。
• 使用.spoiler[open] > *:not(summary)选择器，精准控制展开状态下除了按钮本身（summary）之外的内容以块级元素显示，自动换行到新一行。
• 新增的间距样式让整体布局更宽松舒适，避免元素拥挤。

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