Image 水平列表仅在项目完全显示时显示项目

我想在水平列表中显示图像。该列表不会分成第二行（由

空白：nowrap

控制）并隐藏溢出

问题是图像只能部分显示（取决于视口的宽度和图像的数量）——我希望通过在不能100%显示的情况下不全部显示来避免这种情况

.body{
背景色：#555；
}
.集装箱{
高度：200px；
背景颜色：绿色；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
空白：nowrap；
溢出：隐藏；
}
ulli{
边缘顶部：10px；
右边距：20px；
显示：内联块；
}
ulli.图像{
背景颜色：蓝色；
宽度：320px；
高度：180像素；
}

以下是详细的媒体查询方法。您必须进行数学运算，以获得

ul

的正确断点和

width

。i、 e.总共有4幅图像，

320px

每个图像的宽度加上

10px

边距，要显示所有图像，数字将是

320x4+10x8=1360

，因此断点将是

1360-1=1359

，以此类推，3//2/1幅图像。整个媒体查询集如下所示：

@media (max-width: 1359px) { ul {width: 1020px;} }
@media (max-width: 1019px) { ul {width: 680px;} }
@media (max-width: 679px)  { ul {width: 340px;} }
@media (max-width: 339px)  { ul {width: 0;} }

请参阅完整的演示-

正文{
保证金：0；
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
空白：nowrap；
背景：绿色；
显示：内联块；
溢出：隐藏；
字号：0；
}
ulli{
利润率：10px；
显示：内联块；
字体大小：16px；
}
ulli.图像{
背景颜色：蓝色；
宽度：320px；
高度：180像素；
}
@介质（最大宽度：1359px）{ul{宽度：1020px；}}
@介质（最大宽度：1019px）{ul{宽度：680px；}
@介质（最大宽度：679px）{ul{宽度：340px；}
@介质（最大宽度：339px）{ul{width:0；}}

“在不完全可见时隐藏

元素”：