Html 以100%宽度显示图像行

我需要按照以下思路在网格中显示图像：每个

li

元素的

ul

标签应保持在同一行中，且为容器的100%宽度

正如您在JSFIDLE中看到的，对于演示，我创建了3

ul

。所以我想要3行图像

JSFIDLE：

最终结果如下所示：

我不知道如何进行，使每一行的宽度为100%

---

因此，每一行（

ul

）可能包含1、2、3、4或5个图像。

我认为使用Flexbox就可以了

ul{
宽度：100%；
列表样式：无；
显示器：flex；
证明内容：之间的空间；
}
李{
显示：内联块；
垂直对齐：顶部；
}

每个ultag的每个li元素应保持在同一行中，并为容器的100%宽度

您需要使用Flexbox

---

结果

ul{
显示器：flex；
证明内容：之间的空间；
列表样式：无；
保证金：0；
填充：0；
利润底部：3倍；
}
李{
柔性生长：1；
}
李+李{
左边距：3倍；
}
img{
显示：块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

寻求代码帮助的问题必须包含在问题本身中重现所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。您的解决方案的问题是，没有调整每个图像的宽度以填充空间。因此（同一行的）每个图像之间都有额外的空白。根据需要对每个图像（或您想要的图像）应用“flex grow”属性。