Question

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

＆＃13;

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

＆＃13;

这是我要修复的网站：the site

这是我想要主菜单的图像：the image

任何人都可以帮助我吗？

Answer 1

虽然您可以通过为边框提供边框来尝试此操作，但导航项目的高度比您想要提供的垂直线条更高，那么您可以尝试<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

试试这个

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

2 个答案: