CSS樣式中，我們經(jīng)常會需要處理內(nèi)容超出當(dāng)前頁面展示區(qū)域的問題，其中一種情況就是X軸方向的超出滾動。

比如我們有一個導(dǎo)航欄，有十幾個選項，如果都放在一行顯示，會讓頁面顯得很擁擠。于是我們通常會將導(dǎo)航欄限制在一個固定的寬度內(nèi)，超出的部分讓用戶通過滾動條橫向滾動查看。這就是X軸方向超出滾動的例子。

.navbar {
width: 80%;
overflow-x: auto;
}
.nav-item {
display: inline-block;
margin-right: 20px;
}

以上代碼片段展示了一個簡單的導(dǎo)航欄實現(xiàn)方法。首先將導(dǎo)航欄限制在80%的寬度內(nèi)，在內(nèi)容超出后可以顯示橫向滾動條。導(dǎo)航欄每個選項使用inline-block實現(xiàn)水平排列。

在實際應(yīng)用中，使用X軸方向超出滾動還有很多場景。比如圖片庫、橫向輪播等。通過合理的CSS樣式設(shè)置，可以讓頁面更加美觀、實用。