我的React.js应用程序中有一个Header和一个Nav组件。在标题组件中，我放置了我的徽标，导航包含了常用的导航链接。因为两者都是独立的组件，我不想将它们包装在另一个语义标签中。我只是想让两者相邻显示。我将它们两个显示属性都设置为inline-flex和一定的宽度。标题组件占据了它应有的位置，而导航组件以一种特殊的方式显示，上面有一点空间，就像我给它提供了边距。下面是截图。

这是我的标题组件，然后是导航组件应用程序组件和index.css代码。

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;

导航. 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;
}

# # #您只需要将这两个项目的父项设置为flex容器，以便它们在顶部对齐:

#react {
    display: flex;
}

const { useState } = React;

const Header = () => {
    return (
        <header className="header">
            <img className="nav-logo" src={'https://placehold.co/75'} alt="Little Lemon" />
        </header>
    );
}

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>
    );
}

function App() {
    return (
        <React.Fragment>
            <Header />
            <Nav />
        </React.Fragment>
    );
}

ReactDOM.render(<App />, document.getElementById("react"));

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

#react {
    display: flex;
}

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

# # #尝试将maxHight和maxWidth赋予navLogo类

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

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

.nav-logo{
maxHeight:'15px'
*///////*
}

.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;
}