如何在HTML/CSS中实现移动端单列方块横向滚动？

你说得对，要实现每个.product-contents容器单独横向滚动，确实需要调整CSS的目标元素，并且min-width是触发滚动效果的关键环节，我来帮你梳理下问题和解决方案：

问题原因分析 #

你之前的CSS是给父容器.product-all-contents设置了overflow-x: auto，这会让整个父容器内的两行内容一起横向滚动，而不是每行独立滚动，和你想要的“每行单独滚动”需求不符。

正确的CSS设置方案 #

我们需要把滚动属性应用到每个.product-contents子容器上，同时配合以下属性确保滚动生效：

@media only screen and (max-width: 767px) {
  /* 给每个单独的内容行设置横向滚动 */
  .product-contents {
    overflow-x: auto;
    /* 强制内容不换行，保持在一行 */
    white-space: nowrap;
    /* 可选：确保容器本身宽度适配屏幕 */
    min-width: 100%;
    /* 可选：优化滚动条样式提升体验 */
    scrollbar-width: thin;
  }

  /* 给容器内的子元素设置样式，确保横向排列并触发滚动 */
  .product-contents > * {
    display: inline-block; /* 或inline-flex，根据布局需求调整 */
    /* 关键：给子元素设置min-width，让总宽度超出容器时触发滚动 */
    min-width: 150px; /* 数值根据你的实际内容大小调整 */
    /* 补充样式：添加间距优化布局 */
    margin-right: 10px;
  }
}

关键要点解释 #

• overflow-x: auto：必须应用到每个.product-contents上，这样每个容器的内容超出宽度时才会单独出现横向滚动条。
• white-space: nowrap：阻止容器内的内容自动换行，确保所有子元素保持在同一行。
• min-width：这是你问到的核心——如果子元素的总宽度没有超过容器宽度，滚动条不会出现。所以需要给容器内的子元素设置min-width，确保内容能超出容器可视宽度，从而触发滚动效果。

内容的提问来源于stack exchange，提问作者flash