在網頁設計中,有時我們需要讓某一個層(DIV)在橫向上滑動。通常情況下,層內的內容都是從左到右排列的。但有時需要設置只能在左邊滑動。
Hello World!
This is a demo for horizontal scrolling content.
This is designed to scroll only in one direction, i.e., from left to right.
You can use this example for your own projects and customize it as per your need.
首先,我們需要創建兩個 DIV,其中一個是容器(scroll-container),另一個是要滑動的內容(scroll-content)。容器需要設置 overflow:auto; 屬性以啟用滾動條,而 scroll-content 則需要設置為 inline-block 以確保它在容器內不換行。
現在,我們需要通過 CSS 設置只能在左邊滑動。我們需要將 overflow-y 屬性設置為 hidden ,并使用 white-space 屬性修改斷行行為。因為我們的內容使用了 p 標簽進行段落分隔,所以我們使用 white-space: nowrap; 屬性來避免 p 標簽自動換行,并確保它們在同一行上。
以上代碼就是關于如何讓橫向只能在左邊滑動的示例了,你可以根據自己項目需要進行調整。
上一篇CSS模板軟件網站分享
下一篇mysql怎么復制主機