React.js中CSS异常：Header与Nav组件对齐出现间距问题

我在React应用中拥有Header和Nav两个独立组件，Header内放置Logo，Nav包含常规导航链接。希望二者相邻显示，因此将它们的display属性设为inline-flex并指定对应宽度，但Header显示正常，Nav组件上方却出现类似设置margin-top的多余间距，截图如下：

Header.js #

import React from "react";
import logo from '../assets/Logo .svg';

const Header = () => {
    return (
        <header className="header">
            <img className="nav-logo" src={logo} alt="Little Lemon" />
        </header>
    );
}

export default Header;

Nav.js #

import React from "react";

const Nav = () => {
    return (
        <nav className="nav">
            <ul className="nav-list">
                <li><a className="nav-item" href="#"> Home </a></li>
                <li><a className="nav-item" href="#"> About </a></li>
                <li><a className="nav-item" href="#"> Menu </a></li>
                <li><a className="nav-item" href="#"> Reservations </a></li>
                <li><a className="nav-item" href="#"> Order Online </a></li>
                <li><a className="nav-item" href="#"> Login </a></li>
            </ul>
        </nav>
    );
}

export default Nav;

App.js #

import './App.css';
import Header from './components/Header';
import Main from './components/Main';
import Nav from './components/Nav';
import Footer from './components/Footer';

function App() {
    return (
        <>
            <Header />
            <Nav />
            <Main />
            <Footer />
        </>
    );
}

export default App;

index.css #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
     display: inline-flex;
     width: 30%;
     border: 2px solid red;
     padding: 10px;
}

.nav-logo{
}

.nav {
     display: inline-flex;
     justify-content: center;
     align-items: left;
     width: 70%;
     padding: 10px;
     border: 2px solid gray;
     height: 64px;
}

.nav-list{
     display: flex;
}

.nav-list li{
     list-style: none;
}

.nav-item{
     padding: 6px;
     text-decoration: none;
     color: #333333;
}

问题原因 #

inline-flex元素默认遵循基线对齐规则，Nav组件内部的<ul>元素基线位置会把整个Nav元素向下推；加上Nav设置了固定高度而Header没有，两者对齐逻辑冲突，最终导致Nav顶部出现多余间距。另外，align-items: left是无效的CSS属性值，合法值为flex-start/center/flex-end等。

修复方案 #

方案1：强制顶部对齐（快速修复） #

给Header和Nav的CSS样式添加vertical-align: top，强制它们以顶部为基准对齐：

.header {
     display: inline-flex;
     width: 30%;
     border: 2px solid red;
     padding: 10px;
     vertical-align: top; /* 添加此行 */
}

.nav {
     display: inline-flex;
     justify-content: center;
     align-items: flex-start; /* 修正无效的left值 */
     width: 70%;
     padding: 10px;
     border: 2px solid gray;
     height: 64px;
     vertical-align: top; /* 添加此行 */
}

方案2：使用Flex容器（现代布局最佳实践） #

用一个容器包裹Header和Nav，给容器设置display: flex，无需依赖inline-flex，更符合现代布局逻辑：

1. 修改App.js，添加导航容器：

function App() {
    return (
        <>
            <div className="nav-container">
                <Header />
                <Nav />
            </div>
            <Main />
            <Footer />
        </>
    );
}

2. 修改index.css样式：

/* 添加容器样式 */
.nav-container {
    display: flex;
    width: 100%;
}

.header {
     width: 30%;
     border: 2px solid red;
     padding: 10px;
     /* 移除display: inline-flex */
}

.nav {
     display: flex;
     justify-content: center;
     align-items: center; /* 让导航链接垂直居中，可选flex-start */
     width: 70%;
     padding: 10px;
     border: 2px solid gray;
     height: 64px;
     /* 移除display: inline-flex */
}

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