在主菜单上添加垂直分隔符

Question

如何在主菜单上的li元素后添加垂直分隔符?

<ul class="nav navbar-nav">
    <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a></li>
    <li><a href="#" > نبذه عنا </a></li>
    <li><a href="#"> اكادمية بوذيب للفروسيه </a></li>
    <li><a href="#"> اسطابلات بوذيب </a></li>
    <li><a href="#"> المركز الاعلامي </a></li>
    <li><a href="#"> اتصل بنا </a></li>
    <li><a href="#"> اكثر <i class="fa fa-bars"></i> </a></li>
    <li><a href="#">  </a></li>
</ul>

这是我想修复的网站:网站

我希望主菜单的图片是:the image

有谁能帮我吗?

Answer 1

虽然你可以通过给边框来尝试，但是nav项目的高度比你想给的垂直线要高，那么你可以尝试<pseudo:before>来实现这个

.navbar-default .navbar-nav>li>a:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 1px;
    background: #fff;
    height: 30px;
    right: 0;
    top: calc(50% - 15px);
}
.navbar-default .navbar-nav>li:last-child>a:after,
.navbar-default .navbar-nav>li:first-child>a:after{
    display:none;
}

Answer 2

试试这个

ul li{
  float:left;
  list-style:none;
  padding:0 8px;
  border-right:2px solid gray;
}
ul li:last-child{
  border:none;
  }
a{
  text-decoration:none;
}

<ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a></li>
        <li><a href="#" > نبذه عنا </a></li>
        <li><a href="#"> اكادمية بوذيب للفروسيه </a></li>
        <li><a href="#"> اسطابلات بوذيب </a></li>
        <li><a href="#"> المركز الاعلامي </a></li>
        <li><a href="#"> اتصل بنا </a></li>
        <li><a href="#"> اكثر <i class="fa fa-bars"></i> </a></li>
      </ul>