我的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;
}