僅使用CSS的導航分隔符

Question

我正在嘗試使用CSS創建分隔符，以保持語義並從內容中刪除樣式。

但是，我想在每個<li>項目下方都有一個邊框底部。然而，:before選擇器擴展了<li>元素的寬度，並且它正在創建不一致的邊框。

我試過Separators For Navigation的答案，它使用了和我一樣的方法，並給出了相同的問題。

這是我的導航（選項卡爲主）低於

<nav class="innerNav"> 
    <ul> 
     <li>One </li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
    </ul> 
</nav> 

和我的CSS

.innerNav li { 
    display: inline-block; 
    border-bottom: 3px solid red; 
} 

.innerNav li:before { 
    content: "|"; 
    display: inline-block; 
    color: blue; 
    border: 0; 
    padding-right: 10px; 
} 

.innerNav li:first-child:before { 
    display: none; 
} 

這裏是一個小提琴：http://jsfiddle.net/XFd6D/

Answer 1

雖然使用的是:before僞產生的內容虛擬，仍然計入元素，因此你的元素擴展。

中序來解決這個問題，使用margin-left爲li空間起來，然後再使用position: absolute;爲僞的內容，然後使用left: -8px;正確定位。

請確保您使用position: relative;作爲li元素。

Demo

.innerNav li { 
    display: inline-block; 
    border-bottom: 3px solid red; 
    margin-left: 10px; 
    position: relative; 
} 

.innerNav li:before { 
    content: "|"; 
    position: absolute; 
    left: -8px; 
    color: blue; 
    border: 0; 
    padding-right: 10px; 
} 

.innerNav li:first-child:before { 
    display: none; 
} 

---

你可以做的另一種方法是封裝li的文本在span元素，而且比分配border-bottom到span元素，而不是使用它的li

使用範圍

Demo

更改DOM像

<ul> 
    <li><span>One</span> </li> 
    <li><span>Two</span></li> 
    <li><span>Three</span></li> 
    <li><span>Four</span></li> 
</ul> 

和相關的CSS ...

.innerNav li { 
    display: inline-block; 
} 

.innerNav li span { 
    border-bottom: 3px solid red; 
} 

.innerNav li:before { 
    content: "|"; 
    display: inline-block; 
    color: blue; 
    border: 0; 
    padding-right: 10px; 
    padding-left: 10px; 
} 

.innerNav li:first-child:before { 
    display: none; 
} 

Answer 2

This應與IE8和更高的工作。 有點像阿里恩先生的方法，但有點短，並與邊界，而不是使用管道。

.innerNav li { 
    display: inline-block; 
    border-bottom: 3px solid red; 
    margin-right: 1em; 
    position: relative; 
} 

.innerNav li + li:before { 
    border-left: 1px solid blue; 
    content:""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    left: -0.5em; 
    top: 0; 
} 

問題可能是您的有關<li>，here更多信息之間的空白。