如何使用CSS分隔navBar内部元素实现左右布局

核心修改逻辑 #

借助Flex布局的justify-content: space-between属性可实现左右元素的两端对齐，这是实现logo和右侧图标组分隔的最简单方案，具体修改点如下：

• 给header标签启用Flex布局，同时添加垂直居中规则，保证导航栏内元素上下对齐
• 删除原有的header * {display: inline}全局行内显示规则，该规则会干扰Flex布局的正常生效
• 给导航列表ul也启用Flex布局，实现右侧图标横向排列，同时清除列表默认的内置样式
• 补充HTML中预留的头像容器#circle的基础样式，保证它能正常显示

完整修改后代码 #

CSS代码 #

body {
  background-color: aliceblue;
  /* 给body加顶部内边距，避免固定定位的header遮挡页面内容 */
  padding-top: 80px;
}

header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  /* 启用Flex布局 */
  display: flex;
  /* 左右元素两端对齐，实现logo和导航组分隔 */
  justify-content: space-between;
  /* 子元素垂直居中 */
  align-items: center;
  /* 给header加左右内边距，避免元素贴边 */
  padding: 0 40px;
}

header img {
  height: 40px;
}

header ul {
  /* 导航列表也用Flex布局 */
  display: flex;
  /* 清除列表默认样式 */
  list-style: none;
  margin: 0;
  padding: 0;
  /* 子元素垂直居中 */
  align-items: center;
  gap: 20px; /* 控制导航项之间的间距 */
}

header li a {
  color: black;
  text-decoration: none;
}

/* 补充头像容器的样式，可按需调整 */
#circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
}

HTML代码 #

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<header>
  <img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="网站logo">
  <nav>
    <ul>
      <li><a href=""><i class="material-icons">search</i></a></li>
      <li><a href=""><i class="material-icons">list</i></a></li>
      <li><a href=""><i class="material-icons">notifications</i></a></li>
      <li><a href=""><button>Upgrade</button></a></li>
      <li>
        <a href="">
          <div id="circle"></div>
        </a>
      </li>
    </ul>
  </nav>
</header>

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