左右滑动浏览图片

最新推荐文章于 2020-12-01 06:03:24 发布

lowers_sunshine

最新推荐文章于 2020-12-01 06:03:24 发布

阅读量2.7k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lowers_sunshine/article/details/76239960

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML代码：

 <div class="roll1">
         <ul class="discount_ul">
             <li>
                 <a href="http://wzry.shouyoujun.com/game/productDescMG.do?productNo=1120170725001691">
                     <!--<i class="gamepic"></i>-->
                     <img src="images/xszk2.png"  class="gamepic"/>
                     <span class="gametitle"><span class="title1">缤纷独角兽</span>-小乔</span>
                     <span class="gameprice">现价：<span class="pricet"><span class="price">55</span>.00元</span></span>
                  </a>
             </li>
             <li>
                 <a href="http://wzry.shouyoujun.com/game/productDescMG.do?productNo=1120170720001578">
                     <img src="images/xszk3.png"  class="gamepic"/>
                     <span class="gametitle"><span class="title1">爱与正义</span>-程咬金</span>
                     <span class="gameprice">现价：<span class="pricet"><span class="price">69</span>.26元</span></span>
                 </a>
             </li>
             <li>
                 <a href="http://wzry.shouyoujun.com/game/productDescMG.do?productNo=1120170720001622">
                     <img src="images/xszk4.png"  class="gamepic"/>
                     <span class="gametitle"><span class="title1">鲤鱼之梦</span>-庄周</span>
                     <span class="gameprice">现价：<span class="pricet"><span class="price">69</span>.26元</span></span>
                 </a>
             </li>
             <li>
                 <a href="http://wzry.shouyoujun.com/game/productDescMG.do?productNo=1120170720001587">
                     <!--<i class="gamepic"></i>-->
                     <img src="images/xszk5.png"  class="gamepic"/>
                     <span class="gametitle"><span class="title1">超时空战士</span>-狄仁杰</span>
                     <span class="gameprice">现价：<span class="pricet"><span class="price">92</span>.66元</span></span>
                 </a>
             </li>
         </ul>
         </div>


CSS样式：

.roll1{float: left;width: 100%;height:auto;overflow-y: hidden;overflow-y: hidden;}


.discount_ul{width:2000px;height:auto;overflow-x:scroll;margin:0 auto;margin-left:5% !important;}


.discount_ul li{float:left;width:3rem !important;height:auto;overflow:hidden;margin: 0.34rem 0.1rem 0.34rem 0;border:1px solid #e9ecee;border-top:none;border-radius: 3px;}