橫排導航欄是網頁設計中常用的導航方式，它可以使網站的導航更加清晰、簡潔。而CSS樣式表則是實現橫排導航欄的關鍵之一，下面我們就來看看如何用css實現一個漂亮的橫排導航欄。

首先，我們需要定義導航欄的布局和樣式，可以通過以下代碼進行實現：

nav {
background-color: #1F2933;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
nav ul {
list-style: none;
display: flex;
margin: 0;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav a {
color: #F3F4F6;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
nav a:hover {
color: #60A5FA;
}

通過以上代碼，我們定義了導航欄的樣式。其中，將導航欄設置成flex布局，并使用justify-content: space-between使導航欄中的元素左右對齊，再使用align-items: center使導航欄上下居中。此外，我們還設置了導航欄的背景色、高度、內邊距等樣式，并設置了導航欄里鏈接的樣式。

接下來，我們需要在HTML中添加導航欄的html結構，可以通過以下代碼進行實現：

通過以上代碼，我們定義了導航欄的html結構。其中，我們使用了

和
• 標簽來實現導航欄的列表，每一個列表項里包含一個鏈接標簽，鏈接標簽中包含導航欄的文本。

  最后，我們在CSS中添加一些細節樣式，比如給當前選中的鏈接添加樣式，可以通過以下代碼進行實現：

  nav a.active {
  color: #60A5FA;
  border-bottom: 2px solid #60A5FA;
  }

  通過以上代碼，我們設置了一個.active類，當當前鏈接被選中時，給它添加新樣式。其中，添加了前景色和底部邊框樣式。

  綜上所述，通過以上步驟，我們可以用CSS實現一個漂亮的橫排導航欄。在實踐中，可以根據自己的需要對樣式進行微調，使導航欄更加符合網站的整體風格。