Question

我遇到了一个问题，我试图用导航栏的右侧解决这个问题。

1）我希望导航看起来像这样＆＃34;登录|接触＆＃34; - 目前中间没有分隔符，但是当我添加分隔线时，它在登录文本后不会排成一行。

如果我将其添加为另一个＆＃34; li＆＃34;它没有正确呈现。还有其他任何显示方式吗？

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

下面＆＃39;我的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>标记，它将添加与该行周围其他两个元素相同的样式。

Answer 2

您可以使用伪而不是实际元素吗？管道角色并不意味着是一个＆＃34;分隔符＆＃34;。

li:not(:last-child):after {
  content: "";
  background-color: black;
  height: 1em;
  width: 1px;
  position: absolute;
  right: 0;
  top: calc(50% - .5em);
}

Answer 3

为什么不像这样使用css边框：

.navbar-right > li{
  border-right:1px solid #000; /* put any color you want*/
}

.navbar-right > li:last-child{
  border-right:none;  
}

我认为这比使用HTML更简单。

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

3 个答案: