html - 在右侧导航栏之间添加分隔线

Question

我遇到了一个问题，我正试图通过导航栏的右侧来解决。

1) 我希望导航看起来像这样“登录 | 联系方式”- 目前两者之间没有分隔线，但是当我添加分隔线时，它不会在登录文本之后排列。

如果我将它添加为另一个“li”，它就无法正确呈现。还有其他显示方式吗？

查看bootply: http://www.bootply.com/huskydawgs/waaBbWFaI1

这是我的 html:

    <!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container topnav">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-brand">
            <img class="img-responsive" src="https://red.org/wp-content/plugins/a8c-stripe/img/red_logo.png" alt="Onvia Exchange">
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
              <li>|</li>
                <li><a href="#">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
    <!-- /.container -->
</nav>

Answer 1

只需添加 <a>分隔线周围的标签。

<li><a>|</a></li>

我的猜测是 bootstrap 的样式使用了 <a>标记 <li>标签不使用。通过添加 <a>标记它正在添加与该行周围的其他两个元素相同的样式。