如何让父容器溢出滚动，同时让子 div 横向排列？

如何实现[父容器溢出滚动,子p横向排列]?

在html中，可以设置父容器.ctn的overflow-x: scroll属性，启用水平滚动条。同时设置white-space: nowrap，防止子元素换行。

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

登录后复制

为了让子元素横向排列，需要设置子元素.p1、.p2和.p3的display: inline-block属性。

.p1,
.p2,
.p3 {
  display: inline-block;
}

登录后复制

这样，就可以实现父容器溢出显示滚动条，子元素横向排列的效果。

以上就是如何让父容器溢出滚动，同时让子 p 横向排列？的详细内容，更多请关注抖狐科技其它相关文章！