如何解决HTML+CSS 嵌套复选框式手风琴：有些项目太长
我正在尝试为页面中的导航 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>解决方法
您的问题是父元素的 width 为 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
