html - 如何仅使用 CSS 消除重叠边框

Question

我在创建侧边栏菜单时遇到了这个重叠边框问题。

HTML 和 CSS:

SCSS:
ul {
  list-style: none;
  width: 300px;
  margin: 0;
  padding: 0;
  background: #F9F9F9;
  li {
    position: relative;
    width: 300px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    a {
      display: block;
      padding: 5px;
    }
    span {
      display: none;
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
    }
    &:last-child {
      border-bottom: 1px solid transparent;
    }
    &:hover {
      border-top: 1px solid #DDD;
      border-bottom: 1px solid #DDD;
      border-left: 1px solid red;
      span {
        display: block;
        background: red;
      }
    }
    &.active {
      border-top: 1px solid #DDD;
      border-bottom: 1px solid #DDD;
      background: #FFF;
    }
  }
}

HTML:
<ul>
  <li><a href="#">list one</a>  <span><a href="http://www.google.com" target="_blank">hidden</a></span>
  </li>
  <li class="active"><a href="#">list two</a>
  </li>
  <li><a href="#">list three</a>
  </li>
  <li><a href="#">list four</a>
  </li>
  <li><a href="#">list five</a>
  </li>
</ul>

JSFiddle: https://jsfiddle.net/7xjpqf2m/

Answer 1

很简单，您只需在 SASS 中添加:

ul > li{ margin:-1px }