移動端水平一欄滑動預覽效果

標籤：none   lin   margin   bubuko   one   nowrap   圖片   css   inf   

參考豆瓣電影的實現方式，

css

ul {    white-space: nowrap;    overflow-x: auto;    list-style: none;    padding: 0;}ul li {    margin-left: 0.48rem;    height: 100px;    display: inline-block;    vertical-align: top;    width: 100px;    text-align: center;}

html：

<ul>        <li>            <div class="imgContain"></div>        </li>        <li>            <div class="imgContain"></div>        </li>        <li>            <div class="imgContain"></div>        </li>        <li>            <div class="imgContain"></div>        </li>    </ul>

 

 

移動端水平一欄滑動預覽效果