css - 2 色边框-右

Question

我想在 li-element 导航中创建一个双色 border-right，没有 JavaScript，额外的 div，并且至少与 IE8 兼容。所以每个导航项都会有一个黑色和灰色的右边框。

上图来 self 的断点之一。目前我正在使用 border-left 和 -right。这没有达到想要的结果，因为我无法控制 float 元素在它们堆叠成行后 + 其他问题。

<nav>
    <ul>
        <li><a href="">NHL Home</a></li>
        <li><a href="">Seasons</a></li>
        <li><a href="">Teams</a></li>
        <li><a href="">Records</a></li>
        <li><a href="">Players</a></li>
        <li><a href="">Player origins</a></li>
        <li><a href="">Player age maps</a></li>
        <li><a href="">Analysis</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

我怎样才能做到这一点？

Answer 1

首先，添加这个 CSS 规则:

nav ul li {
    box-sizing:border-box;
}

它使浏览器在对象的总宽度内考虑边框和填充。然后你可以添加边框:

border-left:1px solid #CCC;
border-right:1px solid #000;