如何实现父容器横向滚动并让子div横向排列？

本篇文章向大家介绍《如何实现父容器横向滚动并让子div横向排列？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

实现[父容器溢出滚动,子div横向排列]

要实现父容器溢出滚动，同时让子div横向排列，可以通过设置父容器的css属性：

overflow-x: scroll;
white-space: nowrap;
width: 100%;

将这些样式应用到父容器后，当内容超出容器宽度时，就会出现水平滚动条。并且由于white-space: nowrap;，子div将不会自动换行，而是横向排列。

为了使子div横向排列，需要设置它们的display属性为inline-block：

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

终于介绍完啦！小伙伴们，这篇关于《如何实现父容器横向滚动并让子div横向排列？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！