CSS是一種樣式表語言，可用于調整 HTML 中的元素外觀。在網頁設計中，導航條是非常重要的一個元素，不同的網站都會有不同的導航條設計，水平導航條則是非常常見的一種。下面介紹如何使用 CSS 將導航條制作為水平的。

/* HTML 代碼 */
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">產品與服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
/* CSS 代碼 */
.nav {
list-style: none;
display: flex; /* 設置為 flex 容器 */
justify-content: center; /* 水平居中對齊 */
}
.nav li {
margin: 0 10px;
}
.nav li a {
display: block; /* 使鏈接元素占據整個 li 元素 */
color: #333;
text-decoration: none;
}

如上所示，在 CSS 中我們使用了 display: flex，這個屬性可以將容器設置為彈性盒子。justify-content: center 則可以使導航條水平居中對齊。在每個 li 元素中設置 margin 可以讓元素之間產生間距。最后，將 a 鏈接元素設置為塊級元素，使其占據整個 li 元素，達到導航菜單的效果。