問題 - それは

Question

スクロールHTML作ることができない：トップヘッダで

<div id="tmenu" style="direction:rtl;"> 
    <img src="assets/imgs/menu/all.jpg"/> 
    <img src="assets/imgs/menu/sweets.jpg"/> 
    <img src="assets/imgs/menu/main meals.jpg"/> 
    <img src="assets/imgs/menu/ma5bozat.jpg"/> 
    <img src="assets/imgs/menu/moqblat.jpg"/> 
    <img src="assets/imgs/menu/mofrznat.jpg"/> 
    <img src="assets/imgs/menu/carnavals.jpg"/> 
    <img src="assets/imgs/menu/other.jpg"/> 
</div> 

https://imgur.com/a/hsKax

この画像をチェックしてください画像が問題です。約8人の写真があります。

これは画面の幅に合わせて残りの部分を隠すことを示します。

CSS：それはスクロール可能にする方法

#tmenu 
{ 
    width: max-content; 
    overflow-x: scroll!important; 
    img 
    { 
     display: inline-block; 
     width: 100px!important; 
     height: 100px!important; 
    } 
} 

？これについて

Answer 1

#tmenu 
 
{ 
 
    width: max-content; 
 
    overflow-x: scroll!important; 
 
    height:100px; 
 
    overflow-y:hidden; 
 
    white-space:nowrap; 
 
    float:left; 
 
    width:400px; 
 
    font-size:0 
 
} 
 
    img 
 
    { 
 
     display: inline-block; 
 
     width: 100px!important; 
 
     height: 100px!important; 
 
     vertical-align:middle; 
 
    }

<div id="tmenu" style="direction:rtl;"> 
 
<img src="assets/imgs/menu/all.jpg"/> 
 
<img src="assets/imgs/menu/sweets.jpg"/> 
 
<img src="assets/imgs/menu/main meals.jpg"/> 
 
<img src="assets/imgs/menu/ma5bozat.jpg"/> 
 
<img src="assets/imgs/menu/moqblat.jpg"/> 
 
<img src="assets/imgs/menu/mofrznat.jpg"/> 
 
<img src="assets/imgs/menu/carnavals.jpg"/> 
 
<img src="assets/imgs/menu/other.jpg"/> 
 
</div>

何？