如何实现父容器溢出滚动，子div横向排列？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《如何实现父容器溢出滚动，子div横向排列？》，聊聊，我们一起来看看吧！

在如何实现“父容器溢出滚动,子div横向排列”的问题中，能够让父容器溢出滚动并使子div横向排列，需要使用以下方案：

父容器设置

为父容器设置overflow-x: scroll属性，允许内容在水平方向上溢出。此外，还可以设置white-space: nowrap属性，防止子div换行。

子div设置

将所有子div设置为display: inline-block，使它们在水平方向上排列。

以下示例代码演示了这种方法：

.ctn {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
}

.div1,
.div2,
.div3 {
  display: inline-block;
}

应用此代码后，父容器将允许水平滚动，而子div将横向排列。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何实现父容器溢出滚动，子div横向排列？》文章吧，也可关注golang学习网公众号了解相关技术文章。