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:





< link rel="stylesheet" type="text/css" href="one.css">

• 


• < img src="one.jpg"/>


• 


• < img src="one.jpg"/>


• 

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｝