How do block elements scroll horizontally, similar to those in a broadcast picture?

<div class="container">
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
    </div>
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
    </div>   
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
    </div>   
    <div class="every-content">
      <img src="../../static/homeImg/img_pxpj.png"/>
      <div>XXXX</div>
   </div>
 </div>

clipboard.png

want to scroll the photo horizontally

set the width of the parent element and then overflow-x: scroll, but every-content wraps lines automatically

Please give me some ideas and try many ways to no avail.

Css
Mar.12,2021

add an element to the outer layer of container, which is a display window, plus the width of overflow:hidden;
container is dynamically set to the sum of the widths of the elements inside;
dynamically setting the left value of absolute positioning container


is missing one layer. Generally, the outermost layer overflow: hidden and then the middle layer moves


overflow: hidden can achieve


to sum up, the parent element should also be added: white-space: nowrap;

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e98422-4eb8f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e98422-4eb8f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?