在使用CSS制作導航欄時，我們通常會使用

和
• 標簽來實現。 有時候我們需要在導航欄中間添加一條豎線來分隔菜單項，這時候我們可以使用CSS的border屬性來實現。

  ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  li {
  display: inline-block;
  margin-right: 15px;
  position: relative; /*這里設置為相對定位，為了添加豎線*/
  }
  li:last-child {
  margin-right: 0; /*最后一個li去掉右邊距離*/
  }
  li:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 1px; /*豎線的寬度*/
  position: absolute;
  top: 0;
  right: -8px; /*這里設置為負值是為了讓豎線和菜單項有一定的距離*/
  background-color: #ccc; /*豎線的顏色*/
  }

  在上面的代碼中，我們將所有的

  和
  • 都設置為0的內邊距和外邊距，去掉默認的列表樣式，將
  • 設置為內聯塊級元素，并設置相對定位。接下來使用偽元素:after來添加豎線，將其設置為內聯塊級元素，并設置寬度、高度、絕對定位。最后將豎線的背景色設置為灰色即可。

    這樣，我們就成功得到了一個帶有中間豎線的導航欄了。