如何将<detail>标记放置在<summary>之后

Question

我有几个数据项，其中一些具有 Details （详细信息）和 Summary （摘要）标签，这些标签揭示了额外的输入选项。标准HTML将详细信息标记放在左侧，这会破坏对齐方式。我想将详细信息标记移到“摘要”文本之后。在下图中，我想将三角形​​移到“标题：读书俱乐部”的右侧

<details>
<summary> Title: Book Club</summary>
This revealed area tells more about the course and maybe has a form in it.
</details.

相关：How to properly position the arrow in <details> CSS

Answer 1

1. 将position: relative分配给<summary>

2. 接下来，将此规则集添加到您的<style>块或样式表中：

   details summary::-webkit-details-marker {
     position: absolute;
     right: 0;
     top: 30%;
     z-index: 1;
   }
   

:root {
  font: 400 small-caps 3vw/1.2 Verdana
}

details {
  min-width: fit-content;
  cursor: pointer;
  margin: 10vh 4px -5px 0;
  padding: 0 0 0 10px;
}

summary {
  position: relative;
  min-width: fit-content;
  padding: 1vh;
  outline: 0.5px ridge grey;
}


/*
Hides <detail>'s default arrow
*/

details summary::-webkit-details-marker {
  position: absolute;
  right: 0;
  top: 30%;
  z-index: 1;
}

label {
  display: flex;
  justify-content: space-between;
  margin: 2.5vh auto;
  text-align: right;
}

i {
  font-weight: 700;
  text-align: left;
}

cite {
  text-align: right;
}

<details>
  <summary>Book Club</summary>
  <label><i>Game of Thrones,</i> <cite>George R. R. Martin</cite></label>
  <label><i>Chronicles of Amber,</i> <cite>Roger Zelazny</cite></label>
  <label><i>Tales of the Dying Earth,</i> <cite>Jack Vance</cite></label>
  <label><i>Stranger in a Strange Land,</i> <cite>Robert A. Heinlein</cite></label>
</details>

Answer 2

您可以隐藏默认箭头，并用自己的箭头替换：

details>summary {
 
  list-style: none;
}
summary::-webkit-details-marker {
  display: none
}

summary::after {
  content: ' ►';
}
details[open] summary:after {
  content: " ▼";
}

<details>
  <summary> Title: Book Club</summary>
  This revealed area tells more about the course and maybe has a form in it.
</details>

Answer 3

类似这样的东西：

summary
{
  list-style: none;
}
summary::after
{
  content: " \25b6";
  font-size: .7em;
}

details[open] summary:after
{
  content: " \25bc";
}

<details>
<summary> Title: Book Club</summary>
This revealed area tells more about the course and maybe has a form in it.
</details>