我正在尝试使用标题下的导航栏编写一个简单的网站。问题是导航栏元素的位置直接受标题元素长度的影响，但仅当标题元素具有float：left css规则时。
这两个元素在不同的div中，不共享任何css规则。
我已经尝试过使用justify-content，align-items，margin：auto等。似乎解决问题的唯一方法是从头文本中删除float：left规则，但我需要保留它。
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="style.css" />
<head runat="server">
<title>Lewis</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header-bar">
<h1>Lewis' Website</h1>
<img src="images/headericon.jpg" />
</div>
<div id="navbar">
<nav>
<a href="index.aspx"> Home </a>
<a href="about.aspx"> About </a>
<a href="blog.aspx"> Posts </a>
</nav>
</div>
</form>
</body>
</html>
CSS
#header-bar img {
width: 150px;
height: 150px;
border-radius: 50%;
padding-right: 10%;
padding-left: 10%;
}
#header-bar h1 {
font-family: Arial;
font-size: 70px;
color: white;
padding-left: 10%;
float: left;
}
#navbar {
background-color: white;
margin: 0px;
}
#navbar nav a {
font-size: 35px;
margin: 0 15px;
}
这是您的CSS现在根据您的设计要求修复它。
#form1 {
display: flex;
justify-content: space-between;
align-items: center;
}