More than code
Welcome to the website

自适应布局中Div添加横向滚动条

最近在开发微信端网站,在开发中遇到了一些问题,自适应布局中给div添加横向滚动条,下面来看看解决方案。

直接上代码:

/* html代码 */
<div class="f_s_con">
   <ul>
     <li><a href="#"><img src="./imgs/index_li_01.png" alt=""></a></li>
     <li><a href="#"><img src="./imgs/index_li_02.png" alt=""></a></li>
     <li><a href="#"><img src="./imgs/index_li_03.png" alt=""></a></li>
     <li><a href="#"> <img src="./imgs/index_li_04.png" alt=""></a></li>
   </ul>
 </div>
<!-- css代码 -->
.f_s_con {
  width: 100%;
  box-shadow: 0 0 10px #eee;
  margin: 10px 0;
  overflow-x: auto;/*关键代码*/
  -webkit-overflow-scrolling: touch;
}
.f_s_con ul {
  padding: 10px 0;
  white-space: nowrap;/*关键代码*/
}
.f_s_con ul li {
  display: inline-block;/*关键代码*/
  width: 25%;
  padding: 0 10px;
}
.f_s_con ul li img {
  width: 100%;
  border-radius: 5px;
}

效果如图:

赞(0) 打赏
未经允许不得转载:李帅帅空间 » 自适应布局中Div添加横向滚动条

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

React CLI - 快速创建react项目脚手架工具

官 网GitHub

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏