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



我遇到了一个问题,我正在尝试用导航栏的右侧解决。

1)我想让导航看起来像这样"登录|联系人" - 目前中间没有分隔符,但是当我添加分隔线时,它不会在登录文本之后对齐。

如果我将其添加为另一个"li",它将无法正确呈现。还有其他显示方式吗?

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

这是我的网页:

    <!-- 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>

只需在分隔符周围添加<a>标签即可。

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

我的猜测是,引导程序的样式使用<li>标签不使用的<a>标签。通过添加 <a> 标签,它添加了与线条周围的其他两个元素相同的样式。

您可以使用伪元素而不是实际元素吗?管道字符并不意味着是"分隔符"。

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

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

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

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

最新更新