手機站橫向滾動

標籤：

寫手機站時我們會遇到像這樣的左右滑動的效果，剛開始還誤以為是某個js效果，後來才知道，原來是css就可以實現的。

* {margin: 0;padding: 0;}.box {width: 100%; height: 44px; background: rgba(252, 252, 252, .8); border-bottom: 1px solid #ebebeb; line-height: 40px; overflow: hidden; position: relative;}.box2 {width: 100%; overflow: hidden; height: 52px; overflow-x: auto; position: relative;}.box3 {width: 1400px; left: 0; position: absolute; top: 0;}.box3 div {width: 86px; height: 44px; background: #999; float: left; padding: 0 10px;}

<div class="box">    <div class="box2">        <div class="box3">            <div>first</div>            <div>second</div>            <div>third</div>            <div>four</div>            <div>five</div>            <div>six</div>            <div>first</div>            <div>second</div>            <div>third</div>            <div>four</div>            <div>five</div>            <div>six</div>        </div>    </div></div>

 

手機站橫向滾動