如何启用Horizo​​ntal scroll？

Question

本页的

Here我需要在单行中以水平滚动显示SPACIAL和RECOMMENDED部分。

我目前的CSS是

.box-product {
width: 100%;
overflow: auto;
} 

我试过这样的

.box-product {
width: 100%;
height: 320px;
overflow-x: scroll;
overflow-y: hidden;
}

但它不启用水平滚动，它仍然显示垂直滚动。

Answer 1

将宽度设置为.box-product等于product width * product count。没别了。

现在，你有width: 100%;（737px），在这种情况下，默认的CSS行为是将内容分解为另一行。当你有overflow: hidden时，隐藏第二行。

Answer 2

以box-product class为单位提供pixel宽度，而不是百分比。而不是申请overflow:auto。

它会起作用。

例：     .box-product {     宽度：100px;     溢出：自动;     }

如果您只想要水平而不是添加overflow-x:auto;

Answer 3

实现此.box-product { width: max-content; }（模数供应商前缀）的最简单方法。

或者display: flex，因为它的子节点默认不包装。

Answer 4

删除width: 100%并确保您的内容不会浮动。