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>
检查这张图片
顶部标题中的图像是问题所在。大约有 8 张图片。
它显示适合屏幕宽度的部分并隐藏其余部分。
CSS:
#tmenu
{
width: max-content;
overflow-x: scroll!important;
img
{
display: inline-block;
width: 100px!important;
height: 100px!important;
}
}
如何让它可以滚动?
最佳答案
#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>
这个呢?
关于html - 固定元素问题 - 无法使其可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47765248/