如何将<details>的箭头与<summary>的内容垂直对齐

Question

我正在尝试垂直对齐<details>元素随附的箭头。正如您在演示中看到的，有两件事困扰着我：

1. <summary>的第二行与第一行不在同一水平位置。

2. summary的文本内容未与箭头垂直对齐。

details {
  font-size: 30px;
}

<details>
  <summary>Show more, you can click here on the summary's label to fold down the hidden menu</summary>
  Nothing to see here.
</details>

当前状态：

所需结果：

summary {
  font-size: 30px;
  display: inline-block;
}

<details>
  <summary>
    <div>
      Show more, you can click here on the summary's label to fold down the hidden menu
    </div>
  </summary>
  Nothing to see here.
</details>

我尝试将摘要内容包装在div中，并将其属性设置为inline-block，但这只能解决点 1 。

Answer 1

您可以实现自己的可折叠系统。但是最好的方法是通过删除默认箭头并使用details伪选择器放置一个新箭头来稍微破坏summary和:before元素。

1. 首先隐藏默认箭头：

   summary::-webkit-details-marker {
     display: none;
   }
   

2. 然后使用content属性添加您自己的箭头

   关闭：

   summary:before {
     content: "►";
   }
   

   已打开：

   details[open] summary:before {
     content: "▼";
   }
   

3. 为我们的div的文本添加一个环绕式summary元素：

   现在我们的结构如下：

   <summary>
     ::before
     <div>
       Show more, you can click here on the summary's label to fold down the hidden menu
     </div>
   </summary>
   

4. 我们需要将::before元素与div元素对齐：

   • 将一些width和margin设置为summary:before

   • 将summary > div的{​​{1}}设置为display以对齐两个块

   • 使用CSS函数calc让inline-block保留剩余的水平空间：

     summary > div

   • 要将两个块水平对齐，只需将summary > div { width: calc(100% - 50px); /* 50px is the space taken by summary::before */ } 设置为vertical-align

middle

summary::-webkit-details-marker {
  display: none
}

summary > div {
  width: calc(100% - 50px);
  display: inline-block;
  vertical-align: middle;
}

details {
  font-size: 20px;
}

summary:before {
  content: "►";
  margin: 0px 10px 0 0;
  width: 20px;
}

details[open] summary:before {
  content: "▼";
}

Answer 2

您还可以依赖flexbox并保持默认行为：

summary {
  font-size: 30px;
  display: flex;
  align-items:center;
}
summary > div {
  width:100%;
}

<details>
  <summary>
    <div>
      Show more, you can click here on the summary's label to fold down the hidden menu
    </div>
  </summary>
  Nothing to see here.
</details>

Answer 3

将摘要文本包裹到 <div> 中，将其宽度限制为 ~calc(100% - 50px) 并设置 vertical-align: middle;

summary {
  font-size: 30px;
}

summary > div {
  display: inline-block;
  width: calc(100% - 50px);
  vertical-align: middle;
}

<details>
  <summary><div>Show more, you can click here on the summary's label to fold down the hidden menu</div></summary>
  Nothing to see here.
</details>

我不知道它为什么有效，但似乎适用于所有浏览器。