Question

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

上面的图片来自我的一个断点。目前我正在使用border-left和-right。这并没有达到想要的结果，因为我无法控制浮动项目在行中堆叠+其他问题。

<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;

Answer 2

<style type="text/css">
  ul li {
    border-right: 1px solid black;
    box-shadow: 1px 0px gray;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000');
  }
</style>

Answer 3

试试这个

http://jsfiddle.net/umzA3/6/

li:after {
content:"";
position:absolute;
z-index:1;
border-right:1px solid black;
display:block;
top:0%;
right:0%;
height:100%;
}

应该在ie8 +

中工作

2色边框右

3 个答案: