Как я могу предотвратить содержимое: после переноса на следующую строку?

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: ""; 
}