CSS導航欄上的豎線設(shè)置方法

在CSS中，我們可以通過添加邊框或者背景色來設(shè)置導航欄上的豎線，下面是一些常見的設(shè)置方法：

1、使用邊框?qū)傩?/p>

我們可以使用CSS的邊框?qū)傩詠硖砑迂Q線，我們可以給導航欄的列表項添加邊框：

ul.nav-bar {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.nav-bar li {
  border-right: 1px solid #000; /* 添加豎線 */
}

2、使用背景色

另一種方法是使用背景色來設(shè)置豎線，我們可以給導航欄的列表項添加背景色：

ul.nav-bar {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.nav-bar li {
  background-color: #000; /* 設(shè)置背景色為黑色，形成豎線 */
}

3、使用偽元素

我們還可以使用CSS的偽元素來添加豎線，我們可以給導航欄的列表項添加偽元素：

ul.nav-bar {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.nav-bar li {
  position: relative; /* 添加偽元素 */
}
ul.nav-bar li::after {
  content: "";
  position: absolute;
  right: 0; /* 豎線位置 */
  top: 0; /* 豎線位置 */
  height: 100%; /* 豎線高度 */
  width: 1px; /* 豎線寬度 */
  background-color: #000; /* 設(shè)置背景色為黑色，形成豎線 */
}

是三種常見的設(shè)置導航欄豎線的方法，你可以根據(jù)自己的需求選擇適合的方法。