在HTML中，導航欄是網站重要的組成部分，往往被放置在頁面的頂部或左側。有時，當導航欄中的鏈接數量超過了一屏時，會采用左右滑動的方式展示，以便更好地呈現所有鏈接并提高用戶體驗。

<div class="nav-wrapper">
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>

如上代碼所示，我們使用了<div>標簽包裹了<ul>標簽，讓整個導航欄成為一個可滑動的塊。左右箭頭采用了<div>標簽，設置寬高和背景圖片即可。

.nav-wrapper {
overflow-x: auto;
white-space: nowrap;
position: relative;
}
.nav {
display: inline-block;
}
.arrow {
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
background-image: url("arrow.png");
background-size: 100%;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
transform: rotate(180deg);
}

在CSS樣式中，我們通過設置導航欄父容器的overflow-x屬性實現左右滑動效果，white-space屬性防止文字換行。箭頭通過設置position為absolute實現固定位置，并設置z-index屬性確保在導航欄之上。左箭頭通過設置left為0，右箭頭通過設置right為0實現固定位置。右箭頭還需要進行180度的旋轉，使其指向正確的方向。

通過這些代碼，我們可以實現一個簡單的HTML導航欄左右滑動效果。當導航欄中的鏈接數量超過一屏幕時，用戶可以通過滑動箭頭來瀏覽更多的鏈接，提高了頁面的使用體驗。