這里是模仿 橫向滑動(dòng)條的樣式 ?ul > li > img 的一個(gè)結(jié)構(gòu)
為什么能出現(xiàn)這樣一個(gè)效果 我想主要是因?yàn)??UL設(shè)置一 flex li成了一個(gè)彈性盒子 li的內(nèi)容就撐起li的寬度 大概是這樣吧
1.ul 的結(jié)構(gòu) 核心代碼是 flex ?overlow-x
overflow-x:auto;
display:flex;
width:auto;
2. ?li 結(jié)構(gòu) ?這里其實(shí)可有可無(wú)
width:64px;
3. li 的內(nèi)容結(jié)構(gòu) 其實(shí)真正撐起li的寬度的是 li 里面的內(nèi)容撐起來(lái)的?
width:64px;
height:82px;
4. 隱藏滾動(dòng)條
.actorUl::-webkit-scrollbar{
display:none;
}
實(shí)例代碼
.actorUl{
overflow-x:auto;
display:flex;
width:auto;
}.actorUl::-webkit-scrollbar{
display:none;
}
.actor{
float:left;
width:64px;
margin-right:10rpx;
}
.actor .actorImg{
width:64px;
height:82px;
}
.actor .actorImg image{
width:100%;
height:100%;
}
