CSS3 X滾動框的使用

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

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

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

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

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

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

示例代碼