CSS導航變成橫向的方法其實很簡單，只需要對導航菜單的樣式進行一些修改即可。

首先，在HTML中我們需要將導航的ul標簽設置為display: inline-block，這樣就將導航菜單的布局從垂直變成了水平。

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

然后，我們需要將導航菜單的li元素依次排列在一行內，這可以通過以下的CSS代碼實現：

.nav li {
display: inline-block;
padding: 10px;
}

我們還可以為導航菜單添加一些鼠標懸停時的動態效果，讓導航菜單更加美觀。

.nav li:hover {
background-color: #333;
}
.nav li a {
color: #fff;
}

通過以上的CSS代碼，我們可以將導航菜單變成一個簡潔美觀的橫向菜單，增強網頁的可讀性和用戶體驗。