一、建立外盒子與內(nèi)盒子

原生態(tài)代碼：

<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; }

結(jié)果：

?

修改div為行內(nèi)元素，style加上字段：display:?inline-block;結(jié)果如下：

主要原因，外盒子寬度放不下，內(nèi)盒子自動(dòng)往下移。

二、追加x軸滾動(dòng)效果

使用white-space 屬性

增加x軸滾動(dòng)效果：

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; }

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。