How to create scroll bar that fits all images in one line without overflowing to line below-CodePudding

I'm new to coding and trying to figure this out but, I was wondering if there is a way to display an array of images horizontally without the images dropping to the line below and without the entire page moving with the scroll bar. Currently I have a div container with 5 images. I'd like to add more, however upon adding the 5th image to my div container the image dropped to line below my other 4 images. With only 4 images, the page runs exactly how I want with a scroll bar that moves when you hover and doesn't move the entire webpage with it.

I looked up different solutions and tried adding white-space: no wrap and adjusting the width of my div container but none of these issues fixed the image dropping to the line below. With increasing the width of my div container I found that the entire webpage also moves with that div which is something I also don't want.

Attached is my code for HMTL and 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>

CodePudding user response：

Put Everything You want to Scroll in this Div i.e images then only the images will scroll left and right while the rest of the page remains still.

<div class="hscroll"></div>

<style>
.hscroll {
    overflow-x: auto; /* Horizontal */
  }
</style>

Also, you should arrange the images in a table and read more about semantic markup.

CodePudding user response：

Try this.

<style>
#imagemenu {
width: 100%;
white-space: nowrap;
overflow-x: auto;
padding: .5em;
box-sizing: border-box;
height: auto;
overflow-y: hidden;
}
#imagemenu img {
width: 10em;
white-space: normal;
display: inline-block;
padding: .2em;
vertical-align: middle;
}
</style>
<div id="imagemenu">
<img src="https://files.catbox.moe/86go8c.jpg">
<img src="https://files.catbox.moe/86go8c.jpg">
<img src="https://files.catbox.moe/86go8c.jpg">
<img src="https://files.catbox.moe/86go8c.jpg">
<img src="https://files.catbox.moe/86go8c.jpg">
</div>