如何讓導航元素讓每個導航元素之後水平線在CSS

Question

我期待有一個看起來像這樣的導航元素：

nav | nav | nav | nav 

但我不確定如何讓水平線以適當的間距，我現在有什麼，在sass中是：

#brusters-footer-nav { 
    text-align: center; 

    ul { 
    list-style: none; 

    li { 
     display: inline-block; 
    } 
    } 
} 

下一步如何獲得導航我想要的方式？

Answer 1

添加border您li標籤

#brusters-footer-nav { 
    text-align: center; 
} 

    ul { 
    list-style: none; 
    } 

    li { 
     display: inline-block; 
     border-right: 1px solid black; 
     padding: 0 5px; 
    } 

    li:last-child{ 
     border-right: none; 
    } 

FIDDLE

Answer 2

使用adjacent sibling combinator, +來選擇左邊框並將其添加到相鄰的li元素。

換句話說，這個不會加邊框到第一個li。

li + li { 
    border-left: 1px solid #000; 
} 

ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 0 1em; 
 
} 
 
li + li { 
 
    border-left: 1px solid #000; 
 
}

<ul> 
 
    <li>Item</li><li>Item</li><li>Item</li> 
 
</ul>

您也可以使用:not pseudo class：

li:not(:first-child) { 
    border-left: 1px solid #000; 
} 

ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 0 1em; 
 
} 
 
li:not(:first-child) { 
 
    border-left: 1px solid #000; 
 
}

<ul> 
 
    <li>Item</li><li>Item</li><li>Item</li> 
 
</ul>