水平滚动条

一行超出的内容默认是垂直方向显示滚动条，若是须要水平方向滚动条

主要用到并排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;}