首頁(yè) 猿問(wèn) css怎么寫 div 顯示橫向滾動(dòng)條

css怎么寫 div 顯示橫向滾動(dòng)條

JavaScript

皈依舞 2019-04-14 10:33:14

類似于這樣的結(jié)構(gòu)container寬度是整個(gè)屏幕的寬度box-1寬度是container的20%box-2寬度是container的80%box-3寬度是container的20%開(kāi)始的時(shí)候看不到box-3拖動(dòng)container來(lái)顯示box-3

查看完整描述

2 回答

慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊

最終效果可以看看蘋果官網(wǎng)用手機(jī)打開(kāi)的頂部滑動(dòng)菜單，以下是我寫的一個(gè)演示DEMO可以這樣寫：HTML:hello

hello2

hello3

CSS:.container-wrap{width:100%;height:50px;background-color:rgba(0,0,0,0.8);white-space:nowrap;overflow:hidden;overflow-x:scroll;/*1*/-webkit-backface-visibility:hidden;-webkit-perspective:1000;-webkit-overflow-scrolling:touch;/*2*/text-align:justify;/*3*/&::-webkit-scrollbar{display:none;}}.container{}.container>div{display:inline-block;height:50px;color:#fff;text-align:center;line-height:50px;}.box-1{width:80%;}.box-2{width:20%;}.box-3{width:20%;}