如何在列表

Question

我建立我的导航与无序列表中删除顶部边框的一个元素：

<ul class="nav nav--block nav--banner multi-dropdown"><li class="first current"><a href="http://localhost/huayang/en/" title="Home">Home</a></li> 
    <li><a href="news/" title="News">News</a></li> 
    <li><a href="students" title="Students">Students</a></li> 
    <li><a href="locations" title="Locations">Locations</a></li> 
    <li><a href="contact" title="Contact">Contact</a></li> 
    <li class="last"><a href="about-us" title="About us">About us</a></li> 
</ul> 

我想我的导航看起来像：

注意如何上边框对于当前导航项目消失了吗？这是我无法实现的。 为了让顶部/底部边框适用于整个导航，我必须将其设置为ul元素。在这种情况下，我不知道如何删除活动li项目的边框。

我的CSS：

.nav.nav--block { 

    border-top: 1px solid $medium-grey; 
    border-bottom: 1px solid $medium-grey; 

    &>li.current { 
    background-color: $light-grey; 
    border-top: 1px solid $light-grey; 
    border-left: 1px solid $medium-grey; 
    border-right: 1px solid $medium-grey; 
    } 


    &> li > a { 
    padding: 12px 35px; 
    text-decoration: none; 
    color: $dark-grey; 
    } 
} 

这给了我：

不知道如何解决我的问题？

Answer 1

一种方法是做这样简单的事情。

.currentItem { padding-bottom: 6px; /*Increase padding by width of border */ 
    margin-bottom: -6px; /* Offset by that amount, or use relative positioning which may be better. */ 
    position: relative; /* This method OR margin offset */ 
    bottom: -6px; /* This method OR margin offset */ 
} 

我敢肯定还有很多其他的，有些更优雅。但这些应该工作。

如果它的顶部边框，这是我看到现在，你却反其道而行之：

.currentItem { padding-top: 1px; /*Increase padding by width of border */ 
    margin-top: -1px; /* Offset by that amount, or use relative positioning which may be better. */ 
    position: relative; /* This method OR margin offset */ 
    top: -1px; /* This method OR margin offset */ 
}