CSS中，經常會遇到橫屏超出屏幕的情況，這時候我們需要使用滾動條來進行展示。下面我們來介紹一下如何實現CSS橫屏超出出現滾動。

/* 設置body的寬度為100%，高度為auto */
body {
width: 100%;
height: auto;
}
/* 給遇到橫向溢出的標簽添加overflow-x: auto屬性 */
.horizontal-scroll {
overflow-x: auto;
}
/* 設置滾動條樣式 */
.horizontal-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滾動條軌道 */
.horizontal-scroll::-webkit-scrollbar-track {
background-color: #f1f1f1; 
}
/* 滾動條滑塊 */
.horizontal-scroll::-webkit-scrollbar-thumb {
background-color: #888; 
border-radius: 5px;
}
/* 鼠標懸停在滾動條上時的樣式 */
.horizontal-scroll::-webkit-scrollbar-thumb:hover {
background-color: #555; 
}

在實際開發中，我們可以將滾動條樣式單獨寫入一個CSS文件中，然后在需要滾動條的地方引入即可。

總之，使用CSS實現橫向滾動非常簡單，只需要在需要遇到橫向溢出的標簽中加入overflow-x: auto屬性即可。同時，我們還可以通過設置滾動條樣式來美化滾動條，提高頁面美觀程度。