如何实现HTML页面header与nav导航栏同行显示且分别居左右两侧

实现方案 #

通过Flex布局可以快速实现标题居左、导航居右的同行布局，修改步骤如下：

1. 补全HTML结构，将标题和导航栏包裹在<header>容器中，方便统一控制布局
2. 给header添加Flex布局属性，通过justify-content: space-between实现两端对齐
3. 清除导航列表的默认样式，设置横向排列

调整后HTML代码

<header>
  <h4 id="Logo">My Portfolio</h4>
  <nav>
    <ul class="navbar">
      <li><a href="Home.html">Home</a></li>
      <li><a href="Education.html">Education</a></li>
      <li><a href="About Me.html">About Me</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

调整后CSS代码

* {
  background-color: #a989d6;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 2em 10% 0;
}

header {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar {
  display: flex;
  list-style: none;
  gap: 24px;
}

nav a {
  text-decoration: none;
}

如果需要调整导航项之间的间距，修改.navbar的gap参数即可，要调整垂直对齐方式修改align-items参数即可。

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