如何实现Flex布局导航栏居中且菜单项间带间距？

1. 让导航栏整体居中 #

给外层头部容器设置Flex布局，通过justify-content: center让内部导航水平居中，同时用align-items: center保证垂直方向对齐，再添加上下内边距避免导航贴边：

header {
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

如果你的导航直接放在body里，也可以给nav设置margin: 0 auto，让它自动居中：

nav {
  margin: 0 auto;
}

2. 给菜单项添加间距 #

用Flex容器的gap属性最简便，直接控制菜单项之间的间距，不用单独处理最后一个元素的边距：

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 2rem; /* 数值按需调整，比如1.5rem、32px都可以 */
}

要是不想用gap，也可以给每个li设置margin-right，再给最后一个li去掉多余边距：

nav ul li {
  margin-right: 2rem;
}
nav ul li:last-child {
  margin-right: 0;
}

完整修改后的代码示例 #

HTML

<header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务项目</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

CSS

/* 头部容器，确保导航居中 */
header {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选，加阴影提升视觉效果 */
  padding: 1.2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 导航列表，Flex布局+间距 */
nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 2.5rem; /* 菜单项间距，按需调整 */
}

/* 链接样式+hover下划线动画 */
nav ul li a {
  text-decoration: none;
  color: #333333;
  font-size: 1.1rem;
  font-weight: 500;
  position: relative;
}

nav ul li a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #2563eb; /* 下划线颜色，按需调整 */
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 动画曲线更自然 */
}

nav ul li a:hover::after {
  width: 100%;
}

关键说明 #

• gap是Flex布局专属的间距控制属性，比margin更简洁，不会出现最后一个元素多余边距的问题。
• 给header加上下内边距，能让导航栏不会紧贴页面顶部，视觉上更协调。
• 下划线动画用cubic-bezier曲线，比默认的ease效果更顺滑自然。

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