導航菜單中的垂直線

Question

如何在li元素之間的導航菜單中做這樣一行（白色的）？

<ul> 
<li>Info</li> 
<li>Leaderboard</li> 
<li>To do</li> 
<li>Prizes</li> 
<li>Rules</li> 
</ul> 

Answer 1

如果你的意思是把邊界在左側或在每個L1項目的中間，你可以每個LI元素之間做..

邊境..

<ul> 
    <li>Info</li> 
    <li>Leaderboard</li> 
    <li>To do</li> 
    <li>Prizes</li> 
    <li>Rules</li> 
    </ul> 

    <style> 
    li { 
     border-top: 1px solid white; 
     padding-top: 1px; 
     padding-bottom: 1px; 
    } 
    </style> 

每個LI元素左側的邊框

<ul> 
    <li>Info</li> 
    <li>Leaderboard</li> 
    <li>To do</li> 
    <li>Prizes</li> 
    <li>Rules</li> 
    </ul> 

    <style> 
    li { 
     border-left: 1px solid white; 
     padding-left: 1px; 
    } 
    </style> 

Answer 2

您可以使用:before僞元素來設置垂直分隔線的樣式。

看看這個jsFiddle

li:before{ 
    content: ''; 
    border-left: 1px solid #000; 
} 
li:first-child:before{ 
    content: none; /* Remove the divider from the first item */ 
}