我在我的 squareqpace 网站上添加了一个 CSS 手风琴菜单，但它似乎超出了网站的边缘

如何解决我在我的 squareqpace 网站上添加了一个 CSS 手风琴菜单，但它似乎超出了网站的边缘

我向我的 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;
}

谢谢，丹