在 WEB 開發(fā)過程中，導(dǎo)航欄常常是一個常常被提到的話題。在許多情況下，導(dǎo)航欄的菜單項可能超出了屏幕可見范圍，這時候我們可以考慮使用 CSS 實現(xiàn)導(dǎo)航欄的左右滾動。

首先，我們需要一個外層容器用于顯示導(dǎo)航欄，而導(dǎo)航欄的每一個菜單項都應(yīng)該在一個單獨的內(nèi)層 div 容器內(nèi)。這樣，我們就可以通過移動外層容器來實現(xiàn)導(dǎo)航欄的滾動了。

<div class="navbar-container">
<div class="nav-item">菜單項1</div>
<div class="nav-item">菜單項2</div>
<div class="nav-item">菜單項3</div>
<div class="nav-item">菜單項4</div>
<div class="nav-item">菜單項5</div>
<div class="nav-item">菜單項6</div>
<div class="nav-item">菜單項7</div>
</div>

接下來，我們需要將導(dǎo)航欄容器設(shè)置為橫向滾動布局，并且隱藏溢出部分。同時，每個導(dǎo)航欄菜單項也需要設(shè)置為橫向排列。

.navbar-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.nav-item {
display: inline-flex;
width: 80px;
height: 50px;
justify-content: center;
align-items: center;
background-color: #f1f1f1;
margin: 10px;
}

我們可以發(fā)現(xiàn)，這里的 nav-item div 同時設(shè)置了固定寬度和固定高度，這是為了讓導(dǎo)航欄在滾動時能夠保持一致的外觀。

最后，我們還可以添加一些樣式的細節(jié)，比如當鼠標懸停在導(dǎo)航欄菜單項上時添加背景色。

.nav-item:hover {
background-color: #ddd;
}

到這里，我們就成功實現(xiàn)了一個左右滾動的導(dǎo)航欄。需要注意的是，這里的代碼僅僅是一個簡單的示例，實際項目中可能需要做更多的適應(yīng)性處理和優(yōu)化，比如在移動端以觸摸滑動代替橫向滾動。