鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ flex實(shí)現(xiàn)橫向滾動(dòng)條

flex實(shí)現(xiàn)橫向滾動(dòng)條

橫向一排超出body 可以左右滾動(dòng) 不換行

類似里面元素浮動(dòng) 大盒子overflow-x:scroll

圖片描述

回答
編輯回答
風(fēng)畔

兩種方法

.box li,.box2 li{
    width: 100px;
    height: 30px;
    display: inline-block;
    background: red;
}
.box li:nth-child(2n),
.box2 li:nth-child(2n){
    background: blue;
}
        
.box{
    width: 300px;
    white-space: nowrap;
    overflow-x: auto;
    border:1px solid #999
}
        
.box2{
    width: 300px;
    overflow-x: auto;
    border:1px solid #999
}
.box2{
    display: flex;
}
.box2 li{
    flex-shrink:0
}

<ul class="box">
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

<ul class="box2">
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
2018年5月6日 23:26
編輯回答
巷尾
display: flex;
overflow-x: auto;
// width: 100%;
默認(rèn)就是橫向排列不換行。width看情況加
2017年8月10日 08:00