首頁(yè) 猿問(wèn) 怎么讓tab欄橫著滑動(dòng)？displ...

怎么讓tab欄橫著滑動(dòng)？display既不是flex，又不是block

Html5 Html/CSS CSS3

無(wú)無(wú)法師 2018-05-07 11:09:46

如圖，想要如下效果但是，只有display既不是flex，又不是block的時(shí)候才能達(dá)到上面的效果，所以我就不知道怎么設(shè)置了。

查看完整描述

1 回答

碼農(nóng)2號(hào)

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

div里面一個(gè)ul，

ui里面的li左浮動(dòng)，高度設(shè)置100%，寬自定義，

ul寬度js計(jì)算，等于所有l(wèi)i寬之和，高100%，

div寬是屏幕100%，高自定義，css屬性設(shè)置overflow: auto;再把滑動(dòng)條去掉。

如果需要更好的滑動(dòng)效果，給滑動(dòng)加個(gè)動(dòng)畫(huà)效果，甚至可以加個(gè)滑到底還在滑，會(huì)彈回來(lái)一點(diǎn)。

反對(duì) 回復(fù) 2018-05-07

關(guān)注