ul中多个li里面插入图片，无法显示在一排

问题遇到的现象和发生背景

我在ul中设置了4个li，每个li查日一个图片，ul给高度了，li设置了左浮动，然后宽度每个li加起来不超过ul，但最后不显示在一排上

问题相关代码，请勿粘贴截图

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        body {
            background: url(imgs/1.jpg) no-repeat center top;
        }
        
        .baidu {
            margin: 100px auto;
            width: 700px;
            height: 400px;
            background-color: red;
        }
        
        .baidu .li {
            float: left;
            width: 150px;
            cursor: pointer;
        }
        
        img {
            width: 150px;
        }
    </style>

 <div>
        <ul class="baidu">
            <li>
                <img src="imgs/1.jpg" alt="">
            </li>
            <li>
                <img src="imgs/2.jpg" alt="">
            </li>
            <li>
                <img src="imgs/3.jpg" alt="">
            </li>
            <li>
                <img src="imgs/4.jpg" alt="">
            </li>
        </ul>
    </div>

运行结果及报错内容

结果是显示了四列

我的解答思路和尝试过的方法

我想要达到的结果

别人在ul加上overflow hidden清除浮动
但是我不知道为什么，浮动了，应该是没设置高度才清楚浮动吗，但我这个高度和宽度都合理，为什么还要清楚浮动呢

li前面多了个点

 .baidu li {
            float: left;
            width: 150px;
            cursor: pointer;
        }

.baidu .li改成.baidu>li

选择器写错了
把.baidu .li 后面的.li 改成 li 即可

1. 第一种： 把22行 .baidu .li 改为 .baidu li就行了；
2. 第二种： 其实像这种需求，如果不考虑兼容问题使用弹性布局比较方便，直接给.baidu 设置display: flex; 在日常的开发中弹性布局 用的还是比较多的，可以了解一下。

.baidu li即可

https://www.csdn.net/tags/NtTakg5sMzMzMjctYmxvZwO0O0OO0O0O.html

参考这篇文章
li 浮动，则给 ul 设置足够大的width：

.baidu li {
height: 350px;
float: left;
width: 150px;
 cursor: pointer;
}
screen ul {
position: absolute;
left: 0;
top: 0;
width: 3900px;
}

望采纳
https://blog.csdn.net/weixin_40758850/article/details/89205961