在 Web 開發中，導航條被廣泛使用，橫向導航條是最常見的一種。借助 CSS，我們可以快速地實現一個簡單且具有美觀效果的橫向導航條。

首先，我們需要創建一個包含導航鏈接的無序列表。下面是一個示例代碼：

<ul class="nav-list">
<li><a href="#">首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

接下來，我們將使用 CSS 對導航條進行樣式設置。

為了使導航條成為一行，我們需要去除列表項的默認設置：

.nav-list {
list-style: none;
margin: 0;
padding: 0;
}

現在，我們可以設置我們想要的導航條樣式。例如，我們可以設置導航項之間的間距、字體顏色和背景顏色：

.nav-list li {
display: inline-block;
margin-right: 15px;
}
.nav-list li a {
color: #333;
text-decoration: none;
background-color: #ccc;
padding: 10px;
}
.nav-list li a:hover {
color: #fff;
background-color: #f00;
}

最后，我們可以將導航條放在網站的適當位置。我們可以使用一個容器元素，并通過設置容器元素的寬度來決定導航條的長度：

.nav-container {
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.nav-container .nav-list {
margin: 0 auto;
max-width: 900px;
padding: 10px;
}

現在，我們已經創建了一個簡單且美觀的橫向導航條，您可以通過修改 CSS 樣式來改變導航條的外觀和行為。