在桌面版用標籤(Tabs) 呈現內容的方式,希望在手機看到一樣是一行水平呈現的效果,不要因為寬度限制而文字跳行,很醜,在 Oxygen Builder 可以很快透過兩個步驟實現。
在該 ID 區塊加上以下 CSS:
overflow: auto; /*自動判斷是否觸發 X or Y 軸滑動功能*/
white-space: nowrap; /* 在任何裝置顯示,文字不都要換行*/
預設又粗又黑,可能有些人不喜歡,可以透過以下方式設定,讓 Scroll bar 融合整體設計風格。
::-webkit-scrollbar {
height: 1px; /* 設定水平 scrollbar 高度 */
width: 1px; /* 設定水平 scrollbar 寬度 */
border: 1px solid #fff; /* 設定水平 scrollbar 框線樣式 */
}
::-webkit-scrollbar-thumb:horizontal{
background: #fff; /* 設定水平 scrollbar 背景色 */
}
就這樣,大功告成!🎉 文章分享的 CSS 語法原則上適用任何網站開發,並沒有侷限於 WordPress Oxygen Builder。
關於 Horizontal Scrolling, 在 Oxygen Builder 也有更酷的應用喔。
check it out 👉 Creating A Horizontal Card-Style Post List In WordPress With Oxygen