我是新来的编码，并试图弄清楚这一点，但是，我想知道是否有一种方法来显示图像的数组水平没有图像下降到下面的行，没有整个页面移动的滚动条。目前我有一个div容器与5个图像。我想添加更多，但是在添加第5张图片到我的div容器的图像下降到下面我的其他4张图片行。只有4张图片，页面运行完全按照我想要的滚动条，当你悬停时移动，不移动整个网页。
我查找了不同的解决方案，并尝试添加空白:没有包装和调整我的div容器的宽度，但这些问题都没有固定的图像下降到下面的行。随着div容器宽度的增加，我发现整个网页也随着div移动，这也是我不想要的。
附件是我的html和CSS代码
.menu_imagebox {
display: flex;
overflow: scroll;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>TOWN_Restaurant</title>
<meta charset="UTF-8">
<meta name="description"content="TOWN is a fine dining Asian cuisine restaurant whose mission is to bring quality, style, and good fortune to all guests. ">
<meta name="keywords" content="TOWN Restaurant, food, story, menus, contact, location">
<meta name="author" content="Alexandria Brown">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="https://kit.fontawesome.com/7d95d78745.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="menu_page">
<div class="food">
<h2>Cuisine Menu</h2>
</div>
<div class="menu_container">
<img alt="menu" class="menu" src="images/menu_pg1.jpg">
</div>
</div>
<div class="menu_imagebox">
<div class="menu_image1">
<img atl="" class="" src="images/salmon.jpg">
</div>
<div class="menu_image2">
<img alt="" class="" src="images/app.jpg">
</div>
<div class="menu_image3">
<img alt="" class="" src="images/chicken.jpg">
</div>
<div class="menu_image4"></div>
<img alt="" class="" src="images/app2jpg.jpg">
</div>
<div class="menu_image5"></div>
<img alt="" class="" src="images/wagyu.jpg">
</div>
<div class="menu_image6"></div>
<img alt="" class="" src="">
</div>
</div>把你想要滚动的所有东西放在这个div中，即图像，然后只有图像会左右滚动，而页面的其余部分保持不变。
<div class="hscroll"></div>
<style>
.hscroll {
overflow-x: auto; /* Horizontal */
}
</style>
此外，您应该将图像安排在一个表中，并阅读更多关于语义标记的内容。