当固定菜单溢出时，活动 li 的重写边框不起作用

Question

所以，我想有一个简单的菜单，border-right为1 px黑色。然后，我希望活动的 li 覆盖border-right以1px white。我的代码有效，除非我向固定菜单添加overflow-y: scroll。

在这里你可以看到我的意思，有一个固定的菜单是可滚动的，但活动样式不会生效。如果您注释溢出 y 行，您将看到活动样式确实有效。

https://jsfiddle.net/6bd4b6ty/2/

.menu{
border-right: 1px solid black;
box-sizing: border-box;
width: 100px;
height: 200px;
left: 0;
top: 0;
position: fixed;
overflow-y: scroll; /* comment this line */
}
ul{
list-style: none;
width: 100px;
margin: 0;
padding: 0;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a{
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
}
a.active{
border-right: 1px solid white;
}

<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>

关于如何解决这个问题的任何想法，显然我希望菜单在活动边框工作的同时可滚动:P谢谢！

Answer 1

不固定菜单的宽度，将其设置为自动

看到它工作，我将活动边框颜色更改为红色以提高可见度

.menu{
box-sizing: border-box;
width:auto;
height: 200px;
left: 0;
top: 0;
position: fixed;
/* overflow:visible; */
overflow-y: scroll; /* comment this line */
}
ul{
list-style: none;
width: 100px;
margin: 0;
padding: 0;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a{
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
border-right: 1px solid black;
}
a.active{
border-right: 1px solid red;
}

<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>

Answer 2

使用:after选择器可以实现这一点

.menu{ 
box-sizing: border-box;
width: auto;
height: 200px;
left: 0;
top: 0;
position: fixed;
overflow-y: scroll; /* comment this line */
}
.menu:after{
content:"";
position:absolute;
width:1px;
height:123%;
background:#000;
right: 0;
top: 0;
z-index: 0;
}
ul{
list-style: none;
width: 100px;
margin: 0;
padding: 0;
position: relative;
z-index:1;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a{
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
// border-right: 1px solid black;
}
a.active{
border-right: 1px solid red;
}

<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>

Answer 3

请更改代码，如下所示。我的编辑被评论了。说明在代码片段下方。

.menu{
/*border-right: 1px solid black;*/ /* I deleted this line*/
box-sizing: border-box;
width: 100px;
height: 200px;
left: 0;
top: 0;
position: fixed;
overflow-y: scroll;
}
ul{
list-style: none;
width: 100%; /* Changed from px to % */
margin: 0;
padding: 0;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100%; /* Changed from px to % */
}
a{
border-right: 1px solid black; /* I added this*/
height: 40px;
width: 100%; /* Changed from px to % */
display: block;
box-sizing: border-box;
}
a.active{
border-right: 1px solid white;
}

<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>

变化

第一次更改

从类中删除.menuborder-right。并将相同的border-right添加到a标签中。

第二次更改

在三个地方，px更改为%。

解释

对于第一次更改

.main的宽度为100px。当水平滚动条出现时，.main的宽度将100px包括滚动条。这就是border-right出现在滚动条之后的原因。

要消除这种情况，请从.main中删除border-right并将border-right添加到a标记。

对于第二次更改

即使所有子元素的宽度相同，垂直滚动条出现的原因如下：

由于出现了水平滚动条，因此子级的某些内容在该水平滚动条下消失了。要查看这些内容，需要垂直滚动条。

通过将px%，剩余宽度(即宽度.main减去水平滚动条宽度)将被视为100%，因此我们可以消除这个问题。

Answer 4

滚动条后出现的边框是一种奇怪的行为。

但是，如果您想要一个变通方法来获得最终输出。查看下面的共享代码段。

* {
box-sizing: border-box;
/* browser reset code */
}
.menu {
width: 100px;
height: calc(40px * 6);
/* actual height of UL */
padding: 0;
border-right: 1px solid red;
margin: 0;
list-style: none;
}
.grand-parent {
width: 100px;
overflow: hidden;
height: 200px;
position: fixed;
left: 0;
top: 0;
}
.parent {
overflow-y: scroll;
height: 200px;
width: 125px;
/* width + approx scrollbar width */
}
li {
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a {
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
}
a.active {
border-right: 1px solid white;
}

<div class="grand-parent">
<div class="parent">
<ul class="menu">
<li><a class="active">potato</a>
</li>
<li><a>cheese</a>
</li>
<li><a>tomato</a>
</li>
<li><a>cucumber</a>
</li>
<li><a>carrot</a>
</li>
<li><a>garlic</a>
</li>
</ul>
</div>
</div>

Answer 5

工作演示!!

删除菜单中的边框样式并添加到 li 元素中。

li{
border-right: 2px solid blue;
height: 40px;
border-bottom: 1px solid white;
width: 100px;
}
li .active{
border-right: 2px solid white!important; 
/* border-right: 2px inset #fff!important; */
}