手风琴在我的常见问题页面中，雪佛龙水平移动

问题描述

我正在使用Shopify建立一家小型在线商店，在退出“ IT学校”后，我不得不重新进行编程/编码，在该学校，我要做的电气工程和金属加工比实际编程还要多。

我想学习HTML，CSS和JavaScript以进一步改善我的商店。我建立（复制了）手风琴风格的常见问题页面。 （这里是https://www.youtube.com/watch?v=qJoxQMKV-ew）

它看起来非常好，我对此感到非常满意。但是，有一个问题。如果问题是多行长（尤其是在移动设备上，因为屏幕宽度比台式机小得多，并且大多数客户使用移动设备），则在打开问题时会旋转的人字形符号会在水平方向移动，而看起来很好。我尝试寻找解决方案，但找不到任何东西。这是我的不得已。

以下是我的问题的视频：https://gfycat.com/shortripeblackwidowspider

还有CSS：

.faq {
  border-radius: 15px;
  overflow: hidden;
}
.faq .tab-toggle {
  display: none;
}
.faq .tab-label {
  background-color: black;
  display:flex;
  justify-content: space-between;
  padding:1em;
  font-weight: normal;
  color:white;
}
.faq .tab-label:hover {
  background-color: rgb(88,88,88);
}
.faq .tab-toggle:checked ~ .tab-label {
  background-color: rgb(88,88);
}
.faq .tab-label::after {
  content:'\276F';
  transition: all .4s;
}
.faq .tab-toggle:checked ~ .tab-label::after {
  transform: rotate(90deg); 
}
.faq .tab-content {
  background-color: white;
  max-height: 0px;
  overflow: hidden;
  transition: all .4s;
  padding: 0 1em;
}
.faq .tab-toggle:checked ~ .tab-content
{
  max-height: 100vh;
  padding: 1em;
}

解决方法

您需要使用transform-origin以确保元素围绕其中心旋转，然后添加：

transform-origin: 0 50%;

使用您的.faq .tab-label::after样式。