React导航栏布局问题：居中center-nav-bar并靠右放置right-nav-bar

我在React项目中创建了一个Navbar，希望将center-nav-bar div居中显示，同时让right-nav-bar div靠页面右侧。由于使用了flexbox，尝试float属性无效；也试过margin-left: auto，但没有效果。

我的React代码： #

import React, { useState, useContext } from "react";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { UserContext } from "../../context/UserProvider";
import "./Navbar.css"

export const Navbar = () => {
  const { userToken, setUserToken, isAdmin } = useContext(UserContext);
  const navigate = useNavigate();

  function handleLogOut() {
    localStorage.clear();
    setUserToken(null);
    navigate("/login");
  }

  return (
    <>
      <div className="nav-bar">
        <nav>
          <ul>
            {userToken ? (
              <>
                <div id="center-nav-bar">
                  <li>
                    <NavLink to="/">Home</NavLink>
                  </li>
                  <li>
                    <NavLink to="/my-pets">My pets</NavLink>
                  </li>
                  <li>
                    {isAdmin && <NavLink to="/dashboard">Dashboard</NavLink>}
                  </li>
                </div>
                <div id="right-nav-bar">
                  <li>
                    <NavLink to="/profile-settings">Profile</NavLink>
                  </li>
                  {userToken && <button onClick={handleLogOut}>Log out</button>}
                </div>
              </>
            ) : (
              <>
                <div id="logged-out-nav">
                  <a href="/login">
                    <button id="login-button">Login</button>
                  </a>
                  <a href="/sign-up">
                    <button id="signup-button">Sign up</button>
                  </a>
                </div>
              </>
            )}
          </ul>
        </nav>
      </div>
      <Outlet />
    </>
  );
};

我的CSS代码： #

.nav-bar {
  display: flex;
  justify-content: center;
  color: white;
  border: 1px solid black;
}

#center-nav-bar {
  border: 1px solid black;
  display: flex;
}

#right-nav-bar {
  border: 1px solid black;
  display: flex;
  margin-left: auto; /* Move #right-nav-bar to the right */
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 1rem;
}

a,
a:visited {
  text-decoration: none;
  color: black;
}

#logged-out-nav {
  justify-content: center;
  align-items: center;
}

修复方案 #

问题核心是flex容器层级和宽度设置错误，导致margin-left: auto无法生效。以下是具体修改：

1. 调整容器宽度，让flex布局生效 #

修改.nav-bar、nav和nav ul的样式，确保它们横向占满整个页面：

.nav-bar {
  display: flex;
  color: white;
  border: 1px solid black;
  width: 100%; /* 占满页面宽度 */
}

nav {
  width: 100%; /* 让nav占满.nav-bar的宽度 */
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%; /* 让ul占满nav的宽度 */
  align-items: center; /* 垂直居中内部元素 */
}

2. 让center-nav-bar水平居中 #

移除.nav-bar的justify-content: center，改为给center-nav-bar设置自动水平外边距：

#center-nav-bar {
  border: 1px solid black;
  display: flex;
  margin: 0 auto; /* 实现水平居中 */
}

3. 保留right-nav-bar的右侧对齐样式 #

现在父容器已经占满宽度，margin-left: auto会自动将元素推到最右侧：

#right-nav-bar {
  border: 1px solid black;
  display: flex;
  margin-left: auto;
}

4. 完善未登录状态的导航样式 #

给logged-out-nav加上display: flex，确保按钮居中：

#logged-out-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

完整修改后的CSS #

.nav-bar {
  display: flex;
  color: white;
  border: 1px solid black;
  width: 100%;
}

nav {
  width: 100%;
}

#center-nav-bar {
  border: 1px solid black;
  display: flex;
  margin: 0 auto;
}

#right-nav-bar {
  border: 1px solid black;
  display: flex;
  margin-left: auto;
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  align-items: center;
}

nav li {
  margin: 1rem;
}

a,
a:visited {
  text-decoration: none;
  color: black;
}

#logged-out-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

原理说明 #

原来的.nav-bar设置了justify-content: center，导致nav元素只包裹内容宽度，内部的ul无法占满页面。给各级容器设置width: 100%后，flex容器的宽度覆盖整个页面，此时：

• center-nav-bar的margin: 0 auto会让它在剩余空间中居中
• right-nav-bar的margin-left: auto会自动将元素推到最右侧

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