overflow-x设置后却只有竖向滚动怎么解决

0 0 css html css3
独孤马特i
独孤马特i

声望值:58 0人

2018-07-06 09:59:00 提问

关注 0关注

收藏 0收藏, 609浏览

.cusImg { width: 100%; height:300px; overflow-x: auto; } .cusImg .cus-imgItem { float: left; width: 25%; height:300px; margin: 0 4%; }

得到的结果却是向下的滚动而不是向右的滚动,请问哪里出错了.

请先 登录 后评论

3个回答

  • error(*)177声望 2018-07-09 09:25

    overflow-x: auto; 所谓x 是超出x自适应 而不是超出加滚动条 overflow-x:scroll 这个是x 加滚动条
    请先 登录 后评论
  • ㄨ小蜗牛81声望 2018-07-09 09:25

    你还应该在.cusImg下加一个div,并且设置宽度大一点,你这样写的是.cusImg宽度100%,超出后才滑动,但其实你那些.cus-imgItem的div宽度并没有超出.cusImg的宽度,所以并不能横向滚动。改动之后的世界杯外围投注网站为: <div class="cusImg"> <div class="scroll-div"> <div class="cus-imgItem"></div> <div class="cus-imgItem"></div> <div class="cus-imgItem"></div> <div class="cus-imgItem"></div> </div> </div> .cusImg { width: 100%; height:300px; overflow-x: auto; } .scroll-div{ width:132%; } .cusImg .cus-imgItem { float: left; width: 25%; height:300px; margin: 0 4%; }
    请先 登录 后评论
  • 路漫猿兮54声望 2018-07-09 09:25

    因为4个.cus-imgItem占的宽度超过100%,就会被挤到下一行去了,这样就会出现纵向的滚动条了。解决方法是在.cus-imgItem外再套一层div,这个div的宽度为4个.cus-imgItem的宽度和,然后overflow:hidden。但是这样.cus-imgItem的宽度就不能用百分比了。 <div class="cusImg"> <div class="inner"> <div class="cus-imgItem item1"></div> <div class="cus-imgItem item2"></div> <div class="cus-imgItem item3"></div> <div class="cus-imgItem item4"></div> </div> </div> .cusImg { width: 100%; height:300px; overflow-x: auto; } .inner { position: relative; width: 1680px; height: 100%; overflow: hidden; } .cusImg .cus-imgItem { float: left; width: 400px; height:300px; margin: 0 10px; }
    请先 登录 后评论

世界杯外围投注官网

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问