如何在CSS中正确定位<details>元素箭头，使其固定于首行首字母旁？

嘿，这个坑我之前踩过！用float: left确实会遇到窗口缩小时箭头跳去下一行的问题——核心原因是float元素脱离了正常文档流，当文本宽度不够时就会错位。给你两种简单靠谱的方案，都能让箭头牢牢固定在第一行第一个字母旁边：

方案一：Flex布局（推荐） #

利用flex布局让箭头和summary文本处于同一行的起始位置，即使文本换行也不会跑偏。先隐藏浏览器默认的箭头，再自定义一个可旋转的箭头：

/* 去掉浏览器默认的箭头 */
summary {
  list-style: none;
  cursor: pointer;
  /* 用flex布局对齐元素 */
  display: flex;
  align-items: flex-start; /* 让箭头和文本顶部对齐 */
  gap: 0.5em; /* 箭头和文本之间留一点间距 */
  line-height: 1.5; /* 优化多行文本的行高 */
}

/* 兼容WebKit内核浏览器 */
summary::-webkit-details-marker {
  display: none;
}

/* 自定义箭头 */
summary::before {
  content: '▶';
  font-size: 0.8em;
  transition: transform 0.2s ease; /* 展开/收起时的平滑动画 */
}

/* 展开时旋转箭头 */
details[open] summary::before {
  transform: rotate(90deg);
}

方案二：绝对定位 #

如果不想用flex，也可以用绝对定位把箭头固定在summary的左侧起始位置：

summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-left: 1.5em; /* 给箭头留出左侧空间 */
  line-height: 1.5;
}

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

summary::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 0.2em; /* 调整垂直位置，和文本第一行对齐 */
  transition: transform 0.2s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

完整示例代码 #

把CSS和你的HTML结合起来，效果如下：

<style>
summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  cursor: pointer;
  line-height: 1.5;
}

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

summary::before {
  content: '▶';
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}
</style>

<details>
  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis....</summary>
  <p>这里是展开后显示的内容，可以随便加~</p>
</details>

现在你调整窗口大小试试，不管文本怎么换行，箭头都会稳稳待在第一行的开头啦！

内容的提问来源于stack exchange，提问作者Zack Roberto