Html css水平滚动查询

所以我试着在手机上用一个水平滚动的菜单div，我正在使用它，它看起来相当直接，所以我使用了

.子菜单.右.水平{ 高度：160px； 宽度：700px！重要； 溢出-x：滚动！重要； 溢出y：隐藏； 空白：nowrap；

---

} 我在inspector中玩了一会，想出了这个解决方案：

.submenu .right.horizontal {
  width: 100% !important;
  padding-left: 0px;
}

.submenu .right a {
  display: inline-block;
  float: none;
}

您的宽度设置为硬像素量700px。通过将宽度设置为100%，允许内容正确溢出。标记的样式妨碍了链接的包装，从而使区域可滚动

---

我建议在媒体查询中输入上述样式。

您可以尝试此样式，希望有帮助

HTML

---

你到底为什么要它这么做？为什么不直接用flexbox包装并使其真正响应？@Option真的！以前从未听说过flexboxhonestly@Felicyia我建议你研究一下，这很容易理解，因为它是基于CSS的，这意味着你可以让所有的东西都对手机友好，而不是在所有东西上都添加一个滚动条。这10000%成功了！非常感谢。我想我必须设置该区域，否则它将以100%宽度作为屏幕宽度，然后溢出-y。是的，我设定了700px。再次感谢！

<div id="containersimg">
    <div id="wrapper">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>

#wrapper {
    width: 500px;
    height: 110px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 135px;
   overflow-x: scroll;
}

.square {
   background-color: #00b;
   float: left;
   height: 90px;
   width: 90px;
   margin: 5px;
}