自舉導航中的新行顯示的管道分隔符

Question

我有一個帶下拉的boostrap導航。

<ul class="nav navbar-nav pull-right"> 
    <li> 
    <div class="dropdown"> 
     <a data-target="#" data-toggle="dropdown">User <span class="caret"></span></a> 

     <ul class="dropdown-menu"> 
     <li><a href="account?open">Rediger konto</a></li> 
     <li><a href="orders?open">Vis ordre</a></li> 
     </ul> 
    </div> 
    </li> 
    .... 

我想添加管道的菜單條目之間。

#options-nav .nav>li:after { 
    content: "|"; 
    ... 
} 

https://jsfiddle.net/casperskovgaard/eww51eo3/

問題是，下拉條目管在新行

Answer 1

列表項的DIV是問題的因由。

由於其display: block風格，它正在推倒after僞元素。

添加display: inline-block到div沿着after僞元素：

#options-nav .nav>li>div { 
    display: inline-block; 
}