如何实现水平滚动条让所有图片单行展示不换行、滚动不带动整页

核心问题说明 #

• HTML标签嵌套错误：你代码里的menu_image4、menu_image5、menu_image6的div提前闭合，img元素被放在了子容器外，破坏了flex布局的子元素结构，是图片掉行的核心诱因
• CSS缺少flex布局不收缩、滚动隔离的相关配置

修正后代码 #

CSS部分 #

.menu_imagebox {
  display: flex;
  overflow-x: auto; /* 仅保留横向滚动，隐藏无效纵向滚动条 */
  overflow-y: hidden;
  flex-wrap: nowrap; /* 显式声明不换行，避免浏览器默认样式覆盖 */
  overscroll-behavior-x: contain; /* 容器滚动到边缘时不会触发页面滚动，满足不带动整页的需求 */
  width: 100%; /* 容器宽度继承父元素，不会撑开整个页面 */
}
/* 所有子元素禁止自动收缩，避免被flex容器挤压 */
.menu_imagebox > div {
  flex-shrink: 0;
}
/* 可选配置：统一图片高度，避免高度不一致影响布局，数值可自行调整 */
.menu_imagebox img {
  height: 200px;
  width: auto;
}

HTML部分（仅修正标签闭合错误的片段） #

<div class="menu_imagebox">
  <div class="menu_image1">
    <img alt="" src="images/salmon.jpg">
  </div>
  <div class="menu_image2">
    <img alt="" src="images/app.jpg">
  </div>
  <div class="menu_image3">
    <img alt="" src="images/chicken.jpg">
  </div>
  <div class="menu_image4">
    <img alt="" src="images/app2jpg.jpg">
  </div>
  <div class="menu_image5">
    <img alt="" src="images/wagyu.jpg">
  </div>
  <div class="menu_image6">
    <img alt="" src="">
  </div>
</div>

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