html - 如何让导航元素在CSS中的每个导航元素之后都有水平线

Question

我希望有一个看起来像这样的导航元素:

nav | nav | nav | nav

但我不确定如何以适当的间距放置水平线，我目前在 sass 中拥有的是:

#brusters-footer-nav {
  text-align: center;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

要按照我想要的方式获得导航，接下来的步骤是什么？

Answer 1

为你的 li 标签添加一个 border

#brusters-footer-nav {
  text-align: center;
}

  ul {
    list-style: none;
  }

    li {
      display: inline-block;
      border-right: 1px solid black;
      padding: 0 5px; 
    }

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

FIDDLE