콘텐츠를 다음 행으로 줄 바꿈하는 것을 방지하려면 어떻게해야합니까?

Question

내 메뉴에 li 개의 요소가 메뉴 분할기로 추가 된 후 /을 추가하려고합니다 (부트 스트랩을 기본으로 사용).

코드

는 여기에서 찾을 수 있습니다 : http://jsfiddle.net/zBxAB/1/

당신은 슬래시 다음 행으로 포장되어 볼 수 있듯이, 나는 작동하지 않는이 사용 inline-block를 해결하기 위해 노력했다.

수정할 수 있습니까?

(I 앵커 태그를 선택하여 같은 작업을 얻을 수 있지만 것보다는하지 가능한 경우.)

감사

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