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

Navbar代码：

<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写作，可以做如下的事情：

从HTML

.divider-vertical

为.li元素添加样式，在margin的同一侧使用padding和border - 在这种情况下正确
我们将使用Pseudo class :last-child从最后一个菜单项中删除一些css属性

＆＃13;

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

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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><a href = "#">About</a></li>
            <li><a href = "#">Jobs</a></li>
            <li><a href = "#">Resources</a></li>
          </ul>
      </div>
    </nav>

＆＃13;

Answer 2

看看这个。我将divider-vertical类添加到了Home <li>标记中，以便为其设置样式。

JSFiddle

HTML

  <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li class="divider-vertical"><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 = "#">Resources</a></li>
      </ul>
  </div>
</nav>

CSS

.divider-vertical {
    height: 50px;
    width:100px;
    margin: auto;
    border-left: 1px solid black;
    border-right: 1px solid red;
    text-align:center;
}

Answer 3

您需要将CSS更改为以下内容：

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

左边和右边的边距设置为9px。

如果您想要额外的空间使用：

padding: 0 9px;

代替。 here是一个工作示例，但是您需要使用结果来拉伸面板以查看它，因为bootstrap正在以jsfiddle的默认宽度将导航导入到navicon中。

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

3 个答案: