如何删除列表中一个元素的顶部边框

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 */
}