如何解决手风琴在我的常见问题页面中,雪佛龙水平移动
我正在使用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
样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。