html - 如何在 html/css 中水平滚动移动/平板电脑 View 中的内容？

Question

我有一个 fiddle我通过查看下面的屏幕截图复制了它:

我用于单个方框元素的 CSS 代码是:

.product-contents .product {
  width: 10%;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}

问题陈述:

现在在移动 View 中，我希望屏幕截图中的元素在移动/平板电脑 View 中水平滚动，而不改变元素的大小。为此，我使用了以下 CSS 代码，但它似乎不起作用。

@media only screen and (max-width: 767px)
.product-all-contents {
    overflow-x: auto;
    white-space: nowrap;
}

我想知道我应该在 fiddle 中进行哪些更改，以便整个屏幕截图在移动/平板电脑 View 中滚动。

Answer 1

你走在正确的轨道上，但你不能在这种情况下使用 white-space: nowrap，因为当你使用 inline 时，使用该方法是保留的-block 创建水平滚动的方法。有一个名为 flex-wrap 的 flexbox 属性，当我们设置为 nowrap 时，它会做类似的事情。

查看更新的 fiddle :https://jsfiddle.net/utmyu5r6/4/