如何实现社交图标居左、Logo居中、导航居右的网页导航栏布局？

嘿，我来帮你搞定这个导航布局的问题！你的需求用CSS Flexbox就能轻松实现，先重构一下HTML结构，再配合简单的CSS规则就行，具体步骤如下：

第一步：重构HTML结构 #

首先把社交图标、Logo、导航选项分成三个独立的区块，这样布局起来更清晰，修改后的代码如下：

<div id="nav-div">
  <!-- 社交图标区域 -->
  <div class="social-icons">
    <a href="#" aria-label="GitHub">GitHub</a>
    <a href="#" aria-label="LinkedIn">LinkedIn</a>
    <!-- 可以添加更多社交图标 -->
  </div>

  <!-- Logo区域 -->
  <h1 class="logo">JOSH TAYLOR</h1>

  <!-- 导航选项区域 -->
  <ul class="nav-links">
    <li><a href="">Contact</a></li>
    <li><a href="">CV</a></li>
    <li><a href="">...</a></li>
  </ul>
</div>

第二步：添加CSS样式 #

用Flexbox来实现三栏分布，同时去掉默认的列表样式，让导航看起来更整洁：

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#nav-div {
  display: flex;
  justify-content: space-between; /* 让三个区块分别靠左、居中、靠右 */
  align-items: center; /* 垂直方向居中对齐 */
  padding: 1rem 2rem; /* 给导航栏添点内边距，避免内容贴边 */
  background-color: #fff; /* 可以根据你的网站风格修改背景色 */
}

/* 社交图标样式 */
.social-icons a {
  margin-right: 1rem;
  text-decoration: none;
  color: #333; /* 修改图标/文字颜色 */
}

.social-icons a:last-child {
  margin-right: 0;
}

/* Logo样式 */
.logo {
  font-size: 1.5rem;
  color: #333;
}

/* 导航链接样式 */
.nav-links {
  display: flex;
  list-style: none; /* 去掉列表默认的圆点 */
}

.nav-links li {
  margin-left: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: #333;
}

为什么这样做？ #

• display: flex 把#nav-div变成Flex容器，里面的子元素会自动变成Flex项目
• justify-content: space-between 会让第一个子元素（社交图标）靠左，最后一个子元素（导航链接）靠右，中间的Logo自动居中
• align-items: center 确保所有内容在垂直方向上居中对齐，不会出现高低不齐的情况

如果你的社交图标是用图标字体（比如Font Awesome），只需要把<a>里的文字换成对应的图标标签就行，比如<i class="fab fa-github"></i>，样式规则不需要大改。

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