如何设置头部导航栏文本？CSS实现导航栏嵌入头部方案

首先要修正你的HTML结构问题，否则CSS调整容易出现异常：

• <ul> 的直接子元素必须是 <li>，不能直接嵌套 <a>
• 标签闭合顺序错误（比如 <a> 内的 </li> 位置颠倒、按钮里多余的 </li>）
• 必须把 .navigation 整个移入 .header 容器内，这是让导航被头部包含的结构基础

修正后的HTML代码：

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>Empowering The Nation </h1>
  <ul class="navigation">
    <li><a href="Home.html"><b>Home</b></a></li>
    <li><a href="Courses.html"><b>Courses</b></a></li>
    <li><a href="Pricing.html"><b>Pricing</b></a></li>
    <li><a href="Contact.html"><b>Contact Us</b></a></li>
    <li><a href="Sign In.html"><button>Sign In</button></a></li>
  </ul>
</div>

接下来用CSS实现头部容器内的布局，推荐以下几种方案：

方案1：Flexbox布局（最常用、兼容性好） #

通过Flexbox可以轻松实现头部元素的横向排列和垂直居中，自动处理空间分配：

.header {
  /* 开启Flex布局 */
  display: flex;
  /* 子元素垂直居中 */
  align-items: center;
  /* logo/h1与导航分别靠两端，中间留白 */
  justify-content: space-between;
  /* 避免内容贴边，添加内边距 */
  padding: 0 20px;
  /* 可选：添加背景、高度增强视觉效果 */
  background-color: #fff;
  height: 80px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 清除导航列表默认样式 */
.navigation {
  list-style: none;
  /* 导航项横向排列 */
  display: flex;
  /* 导航项之间的间距 */
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* 可选：优化导航链接样式 */
.navigation a {
  text-decoration: none;
  color: #333;
}

方案2：Grid布局（适合精细空间分配） #

如果需要更精准的布局控制，比如固定logo宽度、标题占满中间空间，可以用Grid：

.header {
  display: grid;
  /* 三列分配：logo自适应、标题占满剩余空间、导航自适应 */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 20px;
  height: 80px;
  background-color: #fff;
}

.navigation {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

方案3：传统浮动布局（仅兼容旧场景） #

如果需要适配非常老的浏览器，可以用浮动，但要处理清除浮动的问题：

.header {
  overflow: hidden; /* 清除内部浮动对容器的影响 */
  padding: 0 20px;
  height: 80px;
  background-color: #fff;
}

.header img, .header h1 {
  float: left;
  margin: 0;
  line-height: 80px; /* 通过行高实现文字垂直居中 */
}

.navigation {
  list-style: none;
  float: right;
  margin: 0;
  padding: 0;
  line-height: 80px;
}

.navigation li {
  display: inline-block;
  margin-left: 20px;
}

关键注意点 #

• 必须确保 .navigation 位于 .header 容器内部，这是布局生效的基础
• 清除列表默认的内外边距和项目符号，避免布局偏移
• 通过 align-items（Flex）或 line-height（浮动）实现垂直居中，保证头部内容对齐整齐

内容的提问来源于stack exchange，提问作者Effected Pringle