前端：实现div等块元素添加X轴滚动显示（Y轴不滚动）

一、建立外盒子与内盒子

原生态代码：

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