问题描述
我正在尝试为页面中的导航 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>