How can I add a divider "/" after each li element in my Bootstrap-based menu without it wrapping to the next line?
The code I am using can be found here: http://jsfiddle.net/zBxAB/1/
I have tried using inline-block to prevent the slash from wrapping, but it doesn't seem to work. Is there a way to fix this issue without selecting the anchor tag individually?
Here is the HTML code:
<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>
And the CSS code:
.navbar .nav > li {
display: inline-block;
}
.navbar li:after {
content: "/";
display: inline-block;
}
.navbar li:last-child:after {
content: "";
}