the code is as follows:
/* CSS */
body
{
margin: 0;
}
-sharpheader
{
margin: 0;
padding: 0;
background-color: -sharpc6f0eb;
}
-sharpheader ul
{
list-style-type: none;
padding: 0;
margin: 0 400px;
background-color: -sharpc6f0eb;
}
-sharpheader ul .logo
{
float: left;
}
-sharpheader ul .logo a
{
display: block;
color: -sharp2b2b2b;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
-sharpheader ul li:not(.logo)
{
float: right;
}
-sharpheader ul li:not(.logo) a
{
display: block;
color: -sharp2b2b2b;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div id="header">
<ul>
<li class="logo"><a href="-sharp">Logo</a></li>
<li><a href="-sharp">1</a></li>
<li><a href="-sharp">2</a></li>
<li><a href="-sharp">3</a></li>
<li><a href="-sharp">4</a></li>
<li><a href="-sharp">5</a></li>
</ul>
</div>
</body>
</html>the effect is as follows:
I just transferred from the software, and I think I can"t understand the layout of html&css. Shouldn"t div and ul automatically define height according to li? What F12 sees is zero.
I typed according to https://www.w3schools.com/css., and its ul did not specify a height, but its background color also came out, so I guessed that it adapted according to li, but this is not the case.
and [tag 1]. [tag 5] Why is the order out of order?
what"s wrong with the code I wrote? Please give me some advice.