Small white, CSS style floating will not close to the left part is why-CodePudding

& lt; html>
& lt; head>
& lt; title> The navigation bar to practice & lt;/title>
& lt; Style type="text/CSS" & gt;
. * {
margin:0;
padding:0;
}

The nav {
list-style:none;
Background - color: PowderBlue;
width:1000px;
margin:50px auto;

}
The nav li {
float:left;
Width: 25%;

}

The nav li a {
display:block;
width:100%;
margin:0 auto;
Padding: 0 px;
text-align:center;
text-decoration:none;
}
A: hover {
Background - color: Coral;

}
Clearfix: after {
content:"";
display:block;
clear:both;

}

& lt;/style>

& lt;/head>
& lt; body>
& lt; Ul & gt;
& lt; li> & lt; A href=https://bbs.csdn.net/topics/#> home page
& lt; li> & lt; A href=https://bbs.csdn.net/topics/#> we
& lt; li> & lt; A href=https://bbs.csdn.net/topics/#> refresh
& lt; li> & lt; A href=https://bbs.csdn.net/topics/#> contact
& lt;/ul>
& lt;/body>
& lt; html>

CodePudding user response:

If it is not in order to solve the problem left over from old projects, recommend direct learn flex or gird layout

CodePudding user response:

1/f, quoted one percentage is deceptive response:

if it is not in order to solve the problem left over from old projects, recommend direct learn flex or gird layout

Don't know much about the flex or gird layout, could you tell me where is change good?

CodePudding user response:

. Nav {
list-style:none; 
Background - color: PowderBlue; 
width:1000px; 
margin:50px auto; 
 padding: 0;  
}

CodePudding user response:

May be ul padding by default

CodePudding user response:

reference Episode came on the second floor response:

Quote: 1/f, quoted one percentage is deceptive response:
if it is not in order to solve the problem left over from old projects, recommend direct learn flex or gird layout

Don't know much about the flex or gird layout, could you tell me where is change good?

your problem now the style of the page, li tag is not closed, global cancel margin and padding asterisk before there is no point, or recommend direct baidu search flex or gird layout

CodePudding user response:

refer to fifth floor a percentage is deceptive response:

Quote: reference Episode came on the second floor response:

Quote: 1/f, quoted one percentage is deceptive response:
if it is not in order to solve the problem left over from old projects, recommend direct learn flex or gird layout

Don't know much about the flex or gird layout, could you tell me where is change good?

your problem now the style of the page, li tag is not closed, global cancel margin and padding asterisk before there is no point, or recommend direct baidu search flex or gird layout

Thank you, I am the li tag on the computer closed, copied, lost, is my problem, sorry ah, before the global cancel a little, I went to baidu flex or gird layout, thanks for bosses to help

CodePudding user response:

reference 4 floor 姎 jacaranda response:

may be ul padding of the default

The preceding. * {margin: 0;
padding:0; } would not cancel the default global layout, why not cancel the ul?

CodePudding user response:

The

reference 3 floor 姎 jacaranda response:

. The nav {
list-style:none; 
Background - color: PowderBlue; 
width:1000px; 
margin:50px auto; 
 padding: 0;  
}

Did and it was no problem, thank you bosses

CodePudding user response:

Episode came, 9/f,

reference response:

Quote: refer to 3rd floor 姎 jacaranda response:

. The nav {
list-style:none;
Background - color: PowderBlue;
width:1000px;
margin:50px auto;
padding: 0;
}

Did and it was no problem, thank you bosses

this is what the hell,,,

Global cancel style, the asterisk directly, don't take that point

CodePudding user response:

references to the tenth floor of a percentage is deceptive response:

Quote: Episode came, 9/f, reference response:

nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull