選項卡是網頁中經常用到的元素之一，它可以幫助用戶快速瀏覽和選擇內容。左右拖動選項卡則是一種常見的選項卡交互方式，通過類比移動應用程序中的標簽頁，幫助用戶更自然地操作。 如果要實現左右拖動選項卡，需要了解一些 CSS 技巧。下面我們就來看一下怎樣實現它。 首先，我們需要有一個容器元素，它包含所有的選項卡內容。一般來說，我們會使用一個 div 元素來作為容器，并設置它的樣式為：

.container {
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch; /* 只對 iOS 設備生效，使滾動更平滑 */
}

這個樣式的作用主要是讓容器具備橫向滾動的能力，同時使容器內所有的內容不換行（nowrap）。-webkit-overflow-scrolling 屬性則是針對 iOS 設備的優化。 接下來，我們需要為每個選項卡設置寬度和浮動樣式：

.tab {
width: 100px;
height: 50px;
float: left;
}

這個樣式中的 width 和 height 分別設置了每個選項卡的寬度和高度，可以根據具體情況進行調整。float 屬性則是將每個選項卡設置為浮動元素，可以讓它們排列在同一行并可以在水平方向上拖動。 最后，我們需要為容器元素中的選項卡設置顏色和其他樣式：

.tab.active {
background-color: #EEE;
}
.tab:hover {
background-color: #DDD;
cursor: pointer;
}
.tab:last-child {
margin-right: 0;
}

在這個樣式中，.tab.active 表示當前選中的選項卡，可以根據需要設置其背景色。.tab:hover 則是當鼠標懸停在選項卡上時應用的樣式，通常會讓選項卡變亮或變暗，并且鼠標指針變成手型。.tab:last-child 則是用來解決最后一個選項卡右邊出現額外空白的問題，可以將它的右邊距設置為零。 實現了以上樣式后，就可以通過 HTML 代碼來創建選項卡了。一個基本的例子如下：

<div class="container">
<div class="tab active">選項卡 1</div>
<div class="tab">選項卡 2</div>
<div class="tab">選項卡 3</div>
<div class="tab">選項卡 4</div>
<div class="tab">選項卡 5</div>
</div>

以上就是左右拖動選項卡的 CSS 實現方式，可以根據需求進行調整和優化。