Html水平滚动不会移动，即使它显示答案

【问题标题】：Html horizontal scroll wont move even so its showingHtml水平滚动不会移动，即使它显示
【发布时间】：2022-02-08 05:42:18
【问题描述】：

这是我的 html 和 css 代码。我正在尝试产生水平滚动页面的效果。滚动条显示它在一半，但它不会让步。我确定我错过了一些非常原始的东西有什么帮助吗？提前致谢

            <div className='scroll-horizontal'>
            <div className='pages white'>
            </div>
            <div className='pages black'>
            <Models />
            </div>
            </div>

---css

             .scroll-horizontal{
             display: grid;
             grid-auto-flow: column;
             grid-auto-columns: 100%;
             gap: 5vw;
             overflow-x:auto;
             height: 100vh;
             white-space: nowrap;
             }

             .pages{
             width: 100vw;
             height: 100vh;
            display: inline-block;
            justify-content: center;
            align-items: center;
             }

【问题讨论】：

标签： html css scroll

【解决方案1】：

我已将您的代码更新为有效的 HTML 并将其粘贴到下面的 sn-p 中，它应该可以按预期工作。

body {
  margin: 0;
  background-color: antiquewhite;
}

.scroll-horizontal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 5vw;
  overflow-x: auto;
  height: 100vh;
  white-space: nowrap;
}

.pages {
  width: 100vw;
  height: 100vh;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.white {
  background-color: aqua;
  color: white;
}

.black {
  background-color: #000;
  color: red;
}

<div class='scroll-horizontal'>
  <div class='pages white'>
    Scroll left to go right
  </div>
  <div class='pages black'>
    Scroll right to go left
  </div>
</div>

【讨论】：