程序开发 · 2024年3月26日

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

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

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

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

登录后复制

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

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

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

登录后复制

以上就是如何实现父容器横向滚动并让子div横向?的详细内容,更多请关注GTHOST其它相关文章!