使bootstrap导航栏分隔线均匀分布

Question

我们如何使导航栏中的垂直分隔线均匀分布？

这是我目前正在使用的HTML和CSS.

HTML:

<li class="divider-vertical"><a href = "#">Contact Us</a></li>

CSS:

.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}

导航条代码:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
       </div>

      <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li><a href = "#">Home</a></li>
            <li class="divider-vertical"><a href = "#">About</a></li>
            <li class="divider-vertical"><a href = "#">Jobs</a></li>
            <li class="divider-vertical"><a href = "#">Contact Us</a></li>
            <li class="divider-vertical"><a href = "#">Resources</a></li>
          </ul>
      </div>
    </nav>

Answer 1

有多种方法可以达到您想要的效果。这是一个快速修复方法，可以解决您的问题并为您提供所需的结果。

 .divider-vertical {
height: 50px;
margin: 0 0 0 9px;
padding: 0 0 0 9px;
border-left: 1px solid red;
}

一个更好的方法可以节省你编写一些 html 的时间，那就是执行如下操作：

1. .divider-vertical从 HTML 中删除您的类
2. 设计您的.li元素，使用margin和padding与您的元素在同一侧border- 在本例中是右侧
3. 我们将使用伪类:last-child从最后一个菜单项中删除一些 css 属性

 .divider-vertical {
height: 50px;
margin: 0 0 0 9px;
padding: 0 0 0 9px;
border-left: 1px solid red;
}

li {
  border-right: 1px solid red;
  margin: 0 9px 0 0;
  padding: 0 9px 0 0;
}

li:last-child {
  border-right: none;
}