HTML+CSS 嵌套复选框式手风琴：有些项目太长

Question

我正在尝试为页面中的导航 aside 制作多级手风琴，我发现一种类型的元素出现得太长：当更改 background-color 在悬停时，那个突出显示的背景延伸到页面的主体。对于本身是另一个文件夹的子项的文件夹类型项（带有子元素），会发生这种情况。

在 JSFiddle here 中，将“文件夹 3”与其他所有内容进行比较时会出现问题。我如何让它匹配？

.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

aside {
  background-color: orange;
  flex: 1;
  flex-direction: column;
  left: 0;
  margin-left: 20px;
  margin-right: 20px;
  position: absolute;
  width: 150px;
  z-index: 1;
}

.container {
  display: flex;
  position: relative;
}

.input {
  position: absolute;
  opacity: 0;
}

.label {
  display: inline-block;
  width: 100%;
}

.label:hover,
.item:not(.has-children):hover {
  background-color: red;
}

.label-l1 {
  padding-left: 20px;
}

.label-l2 {
  padding-left: 40px;
}

.main {
  background-color: yellow;
  flex: 1;
  flex-direction: column;
  margin-left: 170px;
  width: 200px;
}

.sub {
  display: none;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  width: 100%;
}

.input:checked~.sub {
  display: block;
}

<html>

<body>
  <div class="container">
    <aside>
      <ul class="accordion">
        <li class="item has-children">
          <input class="input" type="checkbox" name="c1" id="c1">
          <label class="label" for="c1"><span>Folder 1</span></label>
          <ul class="sub sub-l1">
            <li class="item"><a href="" class="label-l1">Item 1</a></li>
            <li class="item"><a href="" class="label-l1">Item 2</a></li>
          </ul>
        </li>
        <li class="item has-children">
          <input class="input" type="checkbox" name="c2" id="c2">
          <label class="label" for="c2"><span>Folder 2</span></label>
          <ul class="sub sub-l1">
            <li class="item has-children">
              <input class="input" type="checkbox" name="c3" id="c3">
              <label class="label label-l1" for="c3"><span>Folder 3</span></label>
              <ul class="sub sub-l1">
                <li class="item"><a href="" class="label-l2">Item 3</a></li>
                <li class="item"><a href="" class="label-l2">Item 4</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </aside>
    <div class="main">
      <p>I must speak my mind about this.</p>
    </div>
  </div>
</body>

</html>

Answer 1

您的问题是父元素的宽度为 100%，元素的 padding 为 20px，这是将右侧边距 20px 推过右边界，将 box-sizing: border-box; 添加到 .label-l1 元素，这将限制任何溢出到边框内并防止背景溢出到边框外。

.label-l1 {
  padding-left: 20px;
  box-sizing: border-box;
}

注意： 您可以在 CSS 中的重置中设置此设置，这样您就不必通过调整边框大小来修复所有可能出现的问题在其他元素上

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}
aside {
  background-color: orange;
  flex: 1;
  flex-direction: column;
  left: 0;
  margin-left: 20px;
  margin-right: 20px;
  position: absolute;
  width: 150px;
  z-index: 1;
}
.container {
  display: flex;
  position: relative;
}
.input {
  position: absolute;
  opacity: 0;
}
.label {
  display: inline-block;
  width: 100%;
}
.label:hover, .item:not(.has-children):hover {
  background-color: red;
}
.label-l1 {
  padding-left: 20px;
  box-sizing: border-box; /* added this line of code */
}
.label-l2 {
  padding-left: 40px;
}
.main {
  background-color: yellow;
  flex: 1;
  flex-direction: column;
  margin-left: 170px;
  width: 200px;
}
.sub {
  display: none;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  width: 100%;
}
.input:checked ~ .sub {
  display: block;
}

<div class="container">
  <aside>
    <ul class="accordion">
      <li class="item has-children">
        <input class="input" type="checkbox" name="c1" id="c1">
        <label class="label" for="c1"><span>Folder 1</span></label>
        <ul class="sub sub-l1">
          <li class="item"><a href="" class="label-l1">Item 1</a></li>
          <li class="item"><a href="" class="label-l1">Item 2</a></li>
        </ul>
      </li>
      <li class="item has-children">
        <input class="input" type="checkbox" name="c2" id="c2">
        <label class="label" for="c2"><span>Folder 2</span></label>
        <ul class="sub sub-l1">
          <li class="item has-children">
            <input class="input" type="checkbox" name="c3" id="c3">
            <label class="label label-l1" for="c3"><span>Folder 3</span></label>
            <ul class="sub sub-l1">
              <li class="item"><a href="" class="label-l2">Item 3</a></li>
              <li class="item"><a href="" class="label-l2">Item 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </aside>
  <div class="main">
    <p>I must speak my mind about this.</p>
  </div>
</div>

HTML+CSS 嵌套复选框式手风琴：有些项目太长

HTML+CSS nested checkbox-style accordion: some items too long

html

css

navigation

accordion