时间戳

首页 > 解决方案 > 如何在 html/css 中水平滚动手机/平板电脑视图中的内容？

html - 如何在 html/css 中水平滚动手机/平板电脑视图中的内容？

问题描述

我有一个小提琴，我通过查看下面的屏幕截图复制了它：

在此处输入图像描述

我用于单个方形框项目的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
}


问题陈述：

现在在移动视图中，我希望屏幕截图中的项目在移动/平板电脑视图中水平滚动，而不改变项目的大小。为了做到这一点，我使用了以下 CSS 代码，但它似乎不起作用。

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

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

标签： htmlcssresponsive-designmedia-queries

解决方案

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

查看更新的小提琴：https ://jsfiddle.net/utmyu5r6/4/

推荐阅读