水平滚动容器

使用 white-space 实现

.container {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
}

.container > .item {
  display: inline-block;
  white-space: normal;
}

white-space 定义了行内元素溢出是否换行。nowrap 即强制溢出不换行，容器内元素会排在同一行上。在容器内部将 white-space 恢复为默认值 normal 即正常换行。

这样容器内的元素就会排在同一行上并溢出，这时容器只需要设置 overflow-x: auto 即可生成水平滚动容器。

需要行内元素对齐的话，.item 可以设置 vertical-align: top。

由于行内元素默认有间隔，可以利用 font-size 进行清除。