css 如何让导航元素在每个导航元素之后有水平线

Question

我希望有一个如下所示的导航元素：

nav | nav | nav | nav

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

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

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

接下来要按照我想要的方式进行导航的步骤是什么？

Answer 1

使用 adjacent sibling combinator, + 到 select 并向相邻的 li 元素添加左边框。

换句话说，这个不会给第一个li添加边框。

li + li {
    border-left: 1px solid #000;
}

ul {
    list-style: none;
}
li {
    display: inline-block;
    padding: 0 1em;
}
li + li {
    border-left: 1px solid #000;
}

<ul>
    <li>Item</li><li>Item</li><li>Item</li>
</ul>

您也可以使用 :not pseudo class:

li:not(:first-child) {
    border-left: 1px solid #000;
}

ul {
    list-style: none;
}
li {
    display: inline-block;
    padding: 0 1em;
}
li:not(:first-child) {
    border-left: 1px solid #000;
}

<ul>
    <li>Item</li><li>Item</li><li>Item</li>
</ul>

Answer 2

将 border 添加到您的 li 标签

#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

css 如何让导航元素在每个导航元素之后有水平线

How to get the navigation element to have horizontal lines after each nav element in css

html

css

sass