问题描述
我向我的 squarespace 站点添加了一些代码块,以便为我的常见问题页面提供一个手风琴式菜单。 Here 是我的代码来源。但是,由于某种原因,代码元素似乎超出了页面的右边缘,因此添加了一个滚动条,但它只是滚动到内容右侧的空白部分(见附图)。我已经尝试更改所有 CSS 元素的边距、填充和宽度,但我无法让手风琴正确地适合屏幕。谁能帮帮我吗??这是我正在使用的代码...
.accordion {
margin: auto;
width: 100%;
Box-sizing: border-Box;
}
.accordion__wrapper {
border: 1px solid #a9a9a9;
border-radius: 4px;
list-style: none;
margin: 1rem 0;
width: 100%;
Box-sizing: border-Box;
}
.accordion__header,.accordion__item {
float: left;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
position: relative;
width: 100%;
text-align: center;
height: 50%;
Box-sizing: border-Box;
}
.accordion__header {
background: auto;
border-bottom: 1px solid #a9a9a9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding-bottom: 1rem;
Box-sizing: border-Box;
}
.accordion__item {
background: auto;
border-bottom: 1px solid #a9a9a9;
margin-bottom: 1px;
padding-bottom: 0.5rem;
height: 50%;
Box-sizing: border-Box;
}
.accordion__item:last-of-type {
border: 0;
border-radius: 4px;
padding-bottom: 0;
}
.accordion__item span {
position: absolute;
text-align: right;
transition: all 0.2s ease-in;
}
.accordion__item input[type=checkBox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 50%;
z-index: 1;
opacity: 0;
}
.accordion__item input[type=checkBox]:checked~div.panel {
float: left;
margin: 5px 0;
max-height: 0;
opacity: 0;
transform: translate(0,50%);
}
.accordion__item input[type=checkBox]:checked~span {
transform: rotate(90deg);
}
<div class="accordion">
<ul class="accordion__wrapper">
<li class="accordion__header">
<h2>Subscription FAQ</h2>
</li>
<!-- accordion__header -->
<li class="accordion__item">
<input type="checkBox" checked>
<h4>+ Question 1</h4>
<div class="panel">
<p4>Answer to question 1</p4>
</div>
<!-- panel -->
</li>
<!-- accordion__item -->
<li class="accordion__item">
<input type="checkBox" checked>
<h4>+ Question 2</h4>
<div class="panel">
<p4>Answer to question 2</p4>
</div>
<!-- panel -->
</li>
<!-- accordion__item -->
<li class="accordion__item">
<input type="checkBox" checked>
<h4>+ Question 3</h4>
<div class="panel">
<p4>Answer to question 3</p4>
</div>
<!-- panel -->
</li>
<!-- accordion__item -->
</ul>
<!-- accordion__wrapper -->
</div>
<!-- accordion -->
scrollbar appears at the bottom of page,but scrolls into an empty section
解决方法
当您使用绝对位置而不设置 left 属性时,该属性的默认值为 'auto'。
根据 https://www.w3schools.com/cssref/pr_pos_left.asp:
"auto = auto 让浏览器计算左边缘位置。这是默认值"
如果您将此元素的 left 属性设置为值“0”,它将从页面左侧的边缘定位。
.accordion__item input[type=checkbox] {
position: absolute;
left: 0; /* add this line */
cursor: pointer;
width: 100%;
height: 50%;
z-index: 1;
opacity: 0; }
查看我发现从输入类中删除宽度的 CSS,修复了这个问题 :D。
.accordion__item input[type="checkbox"] {
position: absolute;
cursor: pointer;
**width: 100%;** <--- remove this :D
height: 50%;
z-index: 1;
opacity: 0;
}
谢谢,丹