水平滾動條

一行超出的內容默認是垂直方向顯示滾動條，若是須要水平方向滾動條

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