CSS橫向導航是網頁設計中常用的一種布局方式，可以為網站提供更加整潔和優雅的界面。下面是設置CSS橫向導航的步驟：

<style>
/* 定義導航欄的樣式 */
.nav {
display: flex; /* 使用Flexbox布局 */
justify-content: center; /* 居中對齊 */
height: 50px; /* 導航欄高度 */
background-color: #e2e2e2; /* 背景顏色 */
}
/* 定義導航鏈接的樣式 */
.nav a {
display: block; /* 塊元素 */
color: #333; /* 文字顏色 */
text-decoration: none; /* 取消下劃線 */
padding: 0 20px; /* 文字內邊距 */
line-height: 50px; /* 行高等于導航欄高度 */
}
/* 鼠標懸停時的樣式 */
.nav a:hover {
background-color: #999; /* 背景顏色 */
color: #fff; /* 文字顏色 */
}
</style>
<div class="nav">
<a href="#">首頁</a>
<a href="#">新聞</a>
<a href="#">產品</a>
<a href="#">聯系我們</a>
</div>

這段代碼中，首先定義了導航欄的樣式，包括使用Flexbox布局、居中對齊、設置高度和背景顏色等。然后定義了導航鏈接的樣式，包括使用塊元素、設置文字顏色和內邊距等。最后定義了鼠標懸停時的樣式，包括改變背景顏色和文字顏色等。

在頁面中使用這段代碼，可以創建一個簡單的橫向導航。如果需要添加更多功能，比如下拉菜單、響應式設計等，可以根據實際需求進行修改和補充。