如何防止從包裝到下一行後的內容？

Question

我想在我的菜單中的li l元素之後添加一個/作爲菜單分隔符 - 使用Bootstrap作爲基礎。

的代碼可以在這裏找到：http://jsfiddle.net/zBxAB/1/

正如你所看到的斜線被包裹到下一行，我試圖解決使用inline-block這裏面是行不通的。

可以修復嗎？

（我可以通過選擇錨標記得到同樣的工作，但寧可不要如果可能的話）。

感謝

HTML：

<nav class="navbar nav-main"> 
        <div class="navbar-inner"> 
         <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
          <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"> 
          </span> 
         </button> 
         <div class="nav-collapse"> 
          <ul class="nav nav-pills"> <li class="portfolio"><a href=#o">Portfolio</a></li><li class="contact-me"><a href="#">Contact Me!</a></li><li class="last from-the-blog"><a href="#">From the Blog</a></li> 
          </ul> 
         </div> 
        </div> 
       </nav> 

CSS：

.navbar .nav > li { 
    display: inline-block; 
} 

.navbar li:after { 
    content: "/"; 
    display: inline-block; 
} 

.navbar li:last-child:after { 
    content: ""; 
} 

Answer 1

我不知道這是否是最好的方式，但可以用絕對定位。

.navbar .nav > li { 
    display: inline-block; 
    position: relative; 
} 

.navbar li:after { 
    content: "/"; 
    display: inline-block; 
    height: 12px; 
    width: 6px; 
    position: absolute; 
    right: 0; 
    top: 8px; 
} 

.navbar li:last-child:after { 
    content: ""; 
}