我正试图为页面中的导航aside制作一个多级手风琴，但我发现有一种类型的元素出现得太长：当悬停时更改background-color时，该元素高亮显示的背景会延伸到页面的主体中。对于本身是另一个文件夹的子文件夹的文件夹类型项目(具有子元素(，会发生这种情况。
在这里的JSFiddle中，当比较"；文件夹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>您的问题是父元素的宽度为100%，而元素的填充为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>