自举导航中的新行显示的管道分隔符

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