CSS3 X滾動框的使用

在一些網頁設計中，我們可能需要在一定的空間內展示大量的文字內容，但是由于頁面寬度有限，無法全部展示，如果全部展示又會導致頁面過于擁擠，所以我們可以使用CSS3中的X滾動框來解決這個問題。

首先，我們需要設置一個div容器，用來包含我們要展示的內容，然后給這個div容器設置一個寬度和高度，并添加overflow: auto;屬性，這樣就可以使得內容超出這個容器時出現滾動條。

/*設置滾動框的樣式 */
.scroll_box{
width: 200px;
height: 120px;
overflow: auto;
white-space: nowrap;
}

接下來，我們需要給內容設置display: inline-block;屬性，這樣內容會以塊級元素的方式排列，并可以占據一定的寬度。另外，還需要給內容設置一個固定的內邊距，這樣才能使每個內容之間有一定的間距。

/*設置滾動框內的樣式 */
.scroll_box p{
display: inline-block;
padding: 10px;
}

最后，我們還可以設置white-space: nowrap;屬性，這樣內容就不會換行，而是一直在同一行上展示，這樣就可以保證內容的完整性。

示例代碼