DIV CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动

滚动条水平滚动展示溢出内容

• html
• css（less）
• 思路

html

    <div class="outer">
        <div class="item">1111</div>
        <div class="item">2222</div>
        <div class="item">3333</div>
        <div class="item">4444</div>
        <div class="item">5555</div>
        <div class="item">6666</div>
        <div class="item">7777</div>
        <div class="item">8888</div>
    </div>复制

css（less）

.outer {
  background-color: #39a9ed;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  white-space: nowrap;
  .item {
    display: inline-block;
    width: 80px;
    height: 60px;
    line-height: 60px;
  }
}复制

思路

1. 外部盒子关闭换行（white-space: nowrap）
   如果不开启，超出当前行时会自动展示到下一行
2. 开启外部盒子水平溢出滚动（overflow-x: auto）
   如果不开启溢出滚动，则会撑大整个盒子水平尺寸
3. 定义盒子内元素的展示方式为行内块，并设置指定的宽度
   当所有盒子占据的宽度超出盒子时就会自动触发滚动