一、建立外盒子與內盒子

原生態代碼：

<div class="tol_dev"><div class="dev_li"></div><div class="dev_li"></div><div class="dev_li"></div><div class="dev_li"></div></div>

style：

.tol_dev {top: 300px;left: 300px;width: 300px;height: 100px;background-color: yellow;position: relative; }.dev_li {width: 100px;height: 80px;background-color: blue;margin-left: 10px;margin-top: 5px; }

結果：

?

修改div為行內元素，style加上字段：display:?inline-block;結果如下：

主要原因，外盒子寬度放不下，內盒子自動往下移。

二、追加x軸滾動效果

使用white-space 屬性

增加x軸滾動效果：

overflow:?hidden;overflow-x:?auto;

效果如下：

全部代碼：

<div class="tol_dev"><div class="dev_li"></div><div class="dev_li"></div><div class="dev_li"></div><div class="dev_li"></div></div> .tol_dev {top: 300px;left: 300px;width: 300px;height: 100px;background-color: yellow;position: relative;overflow: hidden;overflow-x: auto;white-space: nowrap; }.dev_li {width: 100px;height: 80px;background-color: blue;display: inline-block;margin-left: 10px;margin-top: 5px; }

?

總結

以上是生活随笔為你收集整理的前端：实现div等块元素添加X轴滚动显示（Y轴不滚动）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。