标题内容出现在列中而不是行

问题描述：

，所以它读取：

后

直播

播放列表

当我想要阅读：邮政直播播放列表登录

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

您需要发布不仅仅是CSS多，我们需要一个工作代码段重现问题 – LGSon

谢谢。我更新了更多的代码。 –

答

li的是默认块元件，但是如果您在父级上设置了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>

或者一个可以让他们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>

标题内容出现在列中而不是行

相关推荐