CSS 中超出左右滾動是一種非常有用的特性。當(dāng)一個元素的內(nèi)容太長，超出了它的容器寬度時，可以使用 CSS 屬性讓這個元素實現(xiàn)左右滾動。

.container {
width: 300px; /* 容器元素的寬度 */
overflow-x: auto; /* 超出寬度部分自動出現(xiàn)水平滾動條 */
}
.content {
white-space: nowrap; /* 讓內(nèi)容不折行 */
}

上面的 CSS 代碼中，我們給容器元素設(shè)置了一個固定的寬度，并將超出容器寬度的部分自動出現(xiàn)水平滾動條。同時，我們將內(nèi)容元素設(shè)置了一個 white-space 屬性，用來防止內(nèi)容折行。

需要注意的是，在使用左右滾動時，我們應(yīng)該盡可能地避免給容器元素設(shè)置固定寬度。如果我們不確定容器元素的寬度會是多少，可以使用max-width屬性來代替width屬性，讓容器元素自適應(yīng)。

.container {
max-width: 100%; /* 讓容器元素自適應(yīng) */
overflow-x: auto; /* 超出寬度部分自動出現(xiàn)水平滾動條 */
}
.content {
white-space: nowrap; /* 讓內(nèi)容不折行 */
}

有了 CSS 超出左右滾動的特性，我們就可以輕松地實現(xiàn)一些復(fù)雜的布局和交互效果。比如，在移動端上，我們可以使用左右滑動來切換圖片或頁面內(nèi)容，提高用戶體驗。