首页 > 文章列表 > 如何实现父容器横向滚动并让子div横向排列?

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

282 2025-04-05

如何实现父容器横向滚动并让子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;
}
来源:1730781535