CSS html图像不跨多个页面堆叠

我正在学习Udemy的CSS课程，名为“使用HTML5和CSS3构建响应性强的真实世界网站”

图像应该堆叠在一起，如下所示：

image1   image2   image3  image 4.

image1
image2
image3
image4

但它们正在堆积，就像这样：

image1   image2   image3  image 4.

image1
image2
image3
image4

代码是一字不差地复制的

我打字有错误吗

为了尝试隔离问题，我将非功能代码提取到一个单独的文件中。我还试图补充一点

figure {
        display: block;
        float: left;
    }

但这也不起作用。但是，这不是讲师给出的代码的一部分

我希望看到讲师给出的代码起作用，因为在理想情况下，我希望按照他给出的代码继续读这本书，所以我希望可能存在语法问题或其他问题，但我就是想不出来

以下是我提取的代码：

*{
保证金：0；
填充：0；
框大小：边框框；
}
.餐饮展示{
列表样式：无；
宽度：100%；
}
李先生{
显示：块；
浮动：左；
宽度：25%；
}
.用餐照片{
宽度：100%；
保证金：0；
}
.用餐照片{
宽度：100%；
高度：自动；
}

尝试更改照片的大小。我看到你的代码对一些照片有100%的宽度。如果不起作用，尝试使用float:top；而不是浮动：左

.Dine photo

的宽度为100%，因此，如果将其移除并替换为

显示：内联块，则不会在其旁边显示任何图像

它应该可以工作，但是您的另一个问题是

。li宽度为25%。删除该选项，然后图像将水平相邻显示

注意：图形和DIV元素是
显示：块display:inline是一个更好的选择，在这种情况下，可以节省您的代码时间。
尝试使用
图中的每个
标记
li
标记我想您在尝试什么：

<section class="section-meals">

        <ul class="meals-showcase">
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/1.jpg" alt="Korean bimimbap with egg and vegetables">

                </figure>
            </li>

            <li>
                <figure class="meal-photo">

                    <img src="resources/img/2.jpg" alt="Chinese sholik with egg and vegetables">

                </figure>
            </li>                  

            <li>
                <figure class="meal-photo">
                    <img src="resources/img/3.jpg" alt="Indian Hamachaji with">

                </figure>
            </li>

            <li>
                <figure class="meal-photo">
                    <img src="resources/img/4.jpg" alt="Korean goolash with egg">                                       
                </figure>
            </li>
        </ul>




    </section>












尝试删除ul和li标签。另外，不要使用figure标签，而要尝试使用div标签。我只为这个问题添加了一个li，但还有更多…如前所述，如果只有一个li，请将该图形设为浮动：，如果每个li都用li包装，应该可以工作。如果没有，则必须有其他css覆盖您的规则。您共享的代码似乎没有重现您的问题，无法从您共享的内容中帮助您。您说您有更多的lis，好吧，但每个都有四位数，或者每个li有一位数。你应该澄清你的问题