关于#css#的问题，如何解决？

图12是我的代码
图34是我想呈现的
图一有一个@charest是红色的

初学不是很懂，求解答

我想要达到的结果

首先第一点，li是ul的子元素，你的li呢，放在了ul的外面。其次li默认是自成一行，你想要把多个li一行显示，需要把他们设置为行内元素inline或行内块元素inline-block，这里建议直接使用flex布局，在ul上设置display:flex