固定元素问题 - 无法使其可滚动

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

顶部 header 中的图像是问题所在。大约有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>

这个呢？

固定元素问题 - 无法使其可滚动

Issue with fixed element - can't make it scrollable

html

css

sass

angular5