Ask the experts about div css. _html/css_WEB-ITnose

Experts, I have written a box model code and have some doubts about the color part. The content of the doubt is:
Why can list-style-type be added to .middleborder and still produce the same result?
float:left; Why can it only run successfully in .middleborder li but not in .middleborder? ?

Code is attached:
one.html file content:

fa5ba9541a7fd31e3a9b97a558077f86
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7 New Document 6e916e0f7d1e588d4f442bf645aedb2f
c1889bb28e05e7eeb7c703509d2ceabe
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
9780fbb0b3a213c187ff6d3ce415da7b
bca43df87fadf3da8131a62c9596a152
25edfb22a4f469ecb59f1190150159c62cf4413779e88fc31894850b62312101bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64334a9ee8b4329765db22c227b6e470dbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62cf4413779e88fc31894850b62312101bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64334a9ee8b4329765db22c227b6e470dbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62cf4413779e88fc31894850b62312101bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

The content of one.css is as follows:
.bigborder
{
margin-left :260px;
width:500px;
height:180px;
border:1px solid red;
margin-top:200px;
}
.middleborder
{
width:480px;
height:150px;
border:1px solid gray;
margin-left:5px;
padding-left:5px;
}
.middleborder li
{
list-style-type:none;
margin-right:8px;
float:left;
}

.middleborder li img
{
width:50px;
height:50px;
border:1px solid black;
margin-top:10px;

}

Reply to discussion (solve) Scheme)

The standard usage is like this: ul｛list-style-type: none;} Its function is that the style of the li list item included in this ul is empty, and what you set is: .middleborder li
{
list-style-type:none;｝
actually acts on the li element, so the effect is the same. In addition, ul｛float:left｝ means that the ul element floats, but the result you want is the li element to float, so the effect is of course different. It should be .middleborder li｛float:left｝
Give you a basic usage:

ul{margin:0;padding:0;list-style-type:none}ul li{float:left;display:inline;}

The standard usage is like this: ul｛list-style-type: none;} Its function is that the style of the li list item included in this ul is empty, and what you set is:. middleborder li
{
list-style-type:none;｝
actually acts on the li element, so the effect is the same. In addition, ul｛float:left｝ means that the ul element floats, but the result you want is the li element...

May I ask an expert, can float:left only use the floating effect in the li element? ? The ul element cannot be used or has no effect after use?

Of course, ul can use the float attribute, but it is not suitable for your context. When you use it on the ul element, it means to float the entire ul (which contains several li elements), and what you mean is to float the li element in the ul. Haha. For example, if you have several ul elements, if you want to If these ul elements are arranged in a floating manner, you can use ul｛float:left｝