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, +，为相邻的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中的每个nav元素后面都有水平线

2 个答案: