水平滚动条
一行超出的内容默认是垂直方向显示滚动条，如果需要水平方向滚动条
主要用到并排Div 的父级设置white-space: nowrap，并排的div设置display:inline-block;
因为display:inline-block 会引起几个像素的空隙，需要在父级设置font-size:0;可以去掉相邻小div的空隙
完整的代码如下：
<div class="" id="ta_1" style="overflow-x:auto;">
<div class="all-smallImg-wrap">
<div class="smallImg-wrap">
<div class="smallImg">
<img src="../../dist/img/login-bg1.jpg" alt="" />
</div>
<div class="title">标题11</div>
</div>
<div class="smallImg-wrap">
<div class="smallImg">
<img src="../../dist/img/login-bg1.jpg" alt="" />
</div>
<div class="title">标题11</div>
</div>
<div class="smallImg-wrap">
<div class="smallImg">
<img src="../../dist/img/login-bg1.jpg" alt="" />
</div>
<div class="title">标题11</div>
</div>
</div>
</div>.all-smallImg-wrap{height:160px;white-space: nowrap;font-size:0;}
.smallImg-wrap{width:25%;display:inline-block;height:160px;padding-right:15px;}
.smallImg-wrap .smallImg{border:1px solid #ccc;text-align:center;display:table-cell;width:1%;vertical-align:middle;height:130px}
.smallImg-wrap .smallImg img{max-width:100%;max-height:100%;}
.smallImg-wrap>div.title{text-align:center;line-height:30px;font-size:14px;}(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读