首页 > 文章列表 > 如何让父容器溢出滚动,同时让子 div 横向排列?

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

109 2024-12-30

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

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

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

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

为了让子元素横向排列,需要设置子元素.div1、.div2和.div3的display: inline-block属性。

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

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

来源:1730780502