我需要在标题上显示导航栏代码。文本漂浮在页眉下面，我一辈子都不知道如何修复它。在CSS方面，我能做些什么来将文本包含在页眉中？
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>Empowering The Nation </h1>
</div>
<ul class="navigation">
<a href="Home.html"><b>Home</b></li></a>
<a href="Courses.html"><b>Courses</li></b></a>
<a href="Pricing.html"><b>Pricing</b></li></a>
<a href="Contact.html"><b>Contact Us</b></li></a>
<a href="Sign In.html"><button>Sign In</li></button></a>
</ul>
</div>
</div>
</div>您必须使HTML有效。例如，您有无用的结束标记</div>，没有<li>标记，但有</li>标记，等等。。。要将导航栏放在标题中，只需将代码放在标题div中即可。我做了一些更正，你可以看到一个有效html的例子。
<!DOCTYPE html>
<html lang="en">
<header>
<meta charset="UTF-8" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="Home.css" />
<div class="header">
<div class="page-title">
<img src="img/logo.png" alt="logo" />
<h1>Empowering The Nation</h1>
</div>
<div>
<ul class="navigation">
<li><a href="Home.html">Home</a></li>
<li><a href="Courses.html">Courses</a></li>
<li><a href="Pricing.html">Pricing</a></li>
<li><a href="Contact.html">Contact Us</a></li>
<!--Why this button ?-->
<li><a href="Sign In.html"><button>Sign In</button></a></li>
</ul>
</div>
</div>
</header>
<body>
<div>This is the body of the page</div>
</body>
</html>
<style>
.header {
display: flex;
justify-content: space-between;
}
.page-title {
display: flex;
justify-content: flex-start;
align-self: center;
}
img {
align-self: center;
}
</style>您的html有点无效。我解决了。解决你的问题。您可以使用柔性盒。我建议你希望你的清单也是横向的。然后我将display:inline应用于列表(ul，li(。
示例
.nav {
display: flex;
justify-content: space-between;
gap:20px;
margin: 0 auto;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
}
.navigation ul, li{
display: inline;
padding: 0 10px;
font-weight: bold;
}
.navigation a {
color: black ;
}<div class="nav">
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>Empowering The Nation </h1>
</div>
<div class="navigation">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Courses.html">Courses</a></li>
<li><a href="Pricing.html">Pricing</a></li>
<li><a href="Contact.html">Contact Us</a></li>
<li><a href="Sign In.html">Sign In</a></li>
</ul>
</div>
</div>