极客观点
项目管理
HarmonyOS
代码如下：
/* CSS */
body
{
margin: 0;
}
#header
{
margin: 0;
padding: 0;
background-color: #c6f0eb;
}
#header ul
{
list-style-type: none;
padding: 0;
margin: 0 400px;
background-color: #c6f0eb;
}
#header ul .logo
{
float: left;
}
#header ul .logo a
{
display: block;
color: #2b2b2b;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
#header ul li:not(.logo)
{
float: right;
}
#header ul li:not(.logo) a
{
display: block;
color: #2b2b2b;
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="#">Logo</a></li>
<li><a href="#">标签1</a></li>
<li><a href="#">标签2</a></li>
<li><a href="#">标签3</a></li>
<li><a href="#">标签4</a></li>
<li><a href="#">标签5</a></li>
</ul>
</div>
</body>
</html>效果如下图：
刚从软件转过来，觉得html&css的布局套路看不懂，div 和 ul不是应该根据 li 自动定义高度么？怎么F12看到的也是 0。
我是照着 https://www.w3schools.com/css... 来敲的，它的ul也没指定高度，但是它的背景色也出来了，所以我猜测它是根据li来自适应的，但事实并非如此。
还有【标签1】...【标签5】为啥顺序不对啊。。。。
我写的代码有啥问题？请指教。
ul元素上加一个
overflow:hidden就好了。ul中的所有li都有float属性，脱离文档流，导致默认状态下ul不会被子元素撑起。 在（ul）高度为auto的情况下，加了overflow:hidden 属性后，它就会计算其中的浮动元素（li)高度，好决定如何裁剪父元素，父元素高度为auto，它就默认裁剪到子元素的高度。
标签li的顺序不对，是因为你给后面的几个li都用的float:right, 那么它就会将依次将元素移动到行右侧，如果发现右侧已经存在一个元素，它就会挨着放在它的左侧。