我遇到了一个问题,我正在尝试用导航栏的右侧解决。
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 更简单。