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

然后这是主要的App布局

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是默认的块元素，但如果在父级上设置display: flex，默认为行方向，则会水平流动

＆＃13;

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

＆＃13;

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

＆＃13;

或者可以让他们inline-block

＆＃13;

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

＆＃13;

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

＆＃13;

标题内容显示在列而非行中

1 个答案: