0

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

https://www.dropbox.com/s/ub9j2f8anmg38ly/stack.gif

上图来自我的一个断点。目前我正在使用左边界和右边界。这并没有达到想要的结果，因为在浮动项目堆叠成行后我无法控制浮动项目+其他问题。

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

我怎样才能做到这一点？

4

3 回答 3

6

首先，添加这个 CSS 规则：

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

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

border-left:1px solid #CCC;
border-right:1px solid #000;
于 2012-09-15T13:04:35.073 回答
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>
于 2012-09-15T13:06:29.020 回答
2

试试这个

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+中工作

于 2012-09-15T13:16:08.663 回答