html - Bootstrap 导航中新行显示的管道分隔符

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 伪元素。

在 after 伪元素旁边添加一个 display: inline-block 到 div:

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