2 color border-right

我想在li元素導航中創建一個雙色邊框，沒有JavaScript，額外的div，並且至少與IE8兼容。所以每個導航項目都有一個黑色和灰色的右邊框。上述2 color border-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>

我該如何做到這一點？

來源

2012-09-15 Sampsa

首先，添加此CSS規則：

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

這使得瀏覽器考慮對象的總寬度內邊框和填充。然後，您可以添加邊框：

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

來源

2012-09-15 13:04:35 Giona

謝謝了很多！不知道邊框。很有用。 – Sampsa

是的，它是:)我喜歡用這種方式將它聲明爲整個文檔：'* {box-sizing：border-box; }' – Giona

<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-15 13:06:29

不會在IE – Giona

下工作啊。更新，但在這一點上你的代碼更容易。 –

試試這個

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-15 13:16:08 optimistiks

2 color border-right

回答

相關問題