今天我們來一起學習一下如何使用CSS制作橫向排列的導航欄。橫向排列的導航欄在網頁設計中非常常見，它可以提升網頁的易用性和美觀度。下面就讓我們跟隨著下面的步驟一步步來完成一個簡單的橫向導航欄。 首先，我們需要在HTML中創建一個基本的導航欄的結構。在這個例子中，我們簡單地設置了四個導航鏈接。

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

接下來，我們需要使用CSS來定義導航欄的樣式。我們首先將導航欄的

標簽設置為無序列表，并去除默認的樣式。

nav {
display: flex;
justify-content: center;
background-color: #333;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
padding: 0 20px;
}
nav a {
display: block;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
padding: 20px;
transition: all 0.3s ease;
}
nav a:hover {
background-color: #555;
}

在上面的代碼中，我們使用display:flex將導航欄設置為彈性布局，這樣就可以輕松的讓導航鏈接平均分布并居中。我們還設置了導航欄的背景色和字體樣式，使其更加美觀。 最后，當我們把HTML和CSS代碼結合起來，就可以得到一個非常簡單的橫向排列的導航欄了。這就是我們如何使用CSS來制作一個簡單的橫向排列的導航欄。當然，還有許多更復雜的導航欄的設計，通過靈活應用CSS的技巧，我們可以設計出非常獨特的導航欄樣式。