ヘッダーの内容が列ではない行に表示される

Question

問題...ヘッダーの内容が一続きにありません。

ので、それは読む：私はそれを読みたいときに

ポスト

ライブ

プレイリスト

ログイン

を： ポストライブプレイリストログイン

.App { 
    text-align: center; 
    background-color: #e5eefc; 
} 

.App-intro { 
    font-size: large; 
} 

.Body { 
    min-height: 70vh; 

} 

.Center { 
    display: flex; 
    border: 10px solid #e5eefc; 
    min-height: 70vh; 
} 

.Center-left { 
    flex-direction: column; 
    flex-wrap: wrap; 
    flex: 3; 
    border-right:10px solid #e5eefc; 

} 

.footer { 
    display: block; 
    height: 10vh; 
    width: 100vw; 
    color: black; 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 


.header { 
    display: flex; 
    flex-direction: row; 
    display: inline; 
    height: 10vh; 
    width: 100vw; 
    padding-top: 1em; 
    padding-bottom: 1em; 
    color: black; 
} 

そしてここでは、メインアプリレイアウト

import React, { Component } from 'react'; 
import './App.css'; 
import Flexbox from 'flexbox-react'; 
import Footer from './src/components/Footer.js'; 
import Header from './src/components/Header.js'; 
import HeaderLeft from './src/components/HeaderLeft.js'; 
import HeaderRight from './src/components/HeaderRight.js'; 
import Main from './src/components/main/Main.js'; 
import MainBottom from './src/components/main/MainBottom.js'; 
import MainRight from './src/components/main/MainRight.js'; 


class App extends Component { 
    render() { 
    return (
     <div className="App"> 

        <Header /> 

     <div className="Body"> 



      <div className="Center"> 
      <div className="Center-left"> 
       <Main /> 
       <MainBottom /> 
      </div> 

      <MainRight /> 
      </div> 
     </div> 
      <Footer /> 
     </div> 

    ); 
    } 
} 

export default App; 

そしてここでヘッダ

import React, { Component } from 'react'; 
import HeaderLeft from './HeaderLeft.js'; 
import HeaderRight from './HeaderRight.js'; 


export default class Header extends React.Component { 
    render() { 
    return (
    <div className='header'> 

     <HeaderLeft /> 
     <HeaderRight /> 

    </div> 
); 
    } 
}; 

最後にここで

import React, { Component } from 'react'; 


export default class HeaderRight extends React.Component { 
    render() { 
    return (
    <div className='headerRight'> 

    <nav> 
     <ul> 
     <li>Post</li> 
     <li>Live</li> 
     <li>Playlist</li> 
     <li>Login</li> 
     </ul> 
    </nav> 
    </div> 
); 
    } 
}; 

Answer 1

li「sはデフォルトブロック要素であるネストされたコンポーネントです、親にdisplay: flexを設定すると、デフォルトでは行の方向が水平方向に流れます

nav ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 
nav ul li { 
 
    padding: 0 10px; 
 
}

<nav> 
 
    <ul> 
 
    <li>Post</li> 
 
    <li>Live</li> 
 
    <li>Playlist</li> 
 
    <li>Login</li> 
 
    </ul> 
 
</nav>

---

または1つは、彼らがinline-block

nav ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    padding: 0 10px; 
 
}

<nav> 
 
    <ul> 
 
    <li>Post</li> 
 
    <li>Live</li> 
 
    <li>Playlist</li> 
 
    <li>Login</li> 
 
    </ul> 
 
</nav>

あなただけのCSSよりも多くを掲示する必要が