html - 显示元素之间的分隔线

Question

我正在创建一个导航菜单。导航 (.nav) 有 li 用于导航到不同的页面。每个 li 都是 float 的，宽度为 20% 以使用所有屏幕宽度。

现在我需要在 .nav ul li

中的 li 之间显示分隔线

我尝试在第一个 li 之后使用 border-left，但是由于所有 li 都按百分比 float 以覆盖屏幕宽度，所以最后一个 li 下降了。并且没有像 border-left/right 这样的 outline-left/right。

如何在 li 之间显示/制作分隔线而不破坏 li 的宽度，以便所有 nav li 都在一行中？

html:

<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>
        <i class="fa fa-users"></i>
      </li>
      <li>
        <i class="fa fa-compass"></i>
      </li>
      <li>
        <i class="fa fa-envelope"></i>
      </li>
      <li>
        <i class="fa fa-bell"></i>
      </li>
      <li>
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

CSS:

#footer-wrapper {
    background: #00A7FF;
}


.nav {
    list-style: none;
}

.nav li {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}

更新

演示在 codepen .

Answer 1

像这样习惯了

Sibling Selectors 和 :after 和 position relative 定义你的 li 标签，而不是用于 li + li:after 标签和赋值值 content , position, left, top, bottom, border 像这样

li + li:after

演示代码在这里

#footer-wrapper {
    background: #00A7FF;
  overflow:hidden;
}


.nav {
    list-style: none;margin:0;padding:0;width:100%;float:left;
}

.nav li {
    float: left;
  position:relative;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}
.nav li + li:after{
  content:"";
  position:absolute;
  left:0;
  border-left:solid 1px black;
  top:0;
  bottom:0;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}

<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>
        <i class="fa fa-users"></i>
      </li>
      <li>
        <i class="fa fa-compass"></i>
      </li>
      <li>
        <i class="fa fa-envelope"></i>
      </li>
      <li>
        <i class="fa fa-bell"></i>
      </li>
      <li>
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>