我的列表没有并排显示，也没有显示在正确的标题下面。

Question

我希望json数据被解析成一个列表，并且这个列表有两个标题，并在其下面包含相应的列表。我希望这些列表并排放置，但是列表是一个正在运行的列表。

我已经尝试使用ng-重复在我的ul类，并通过使用对齐与css对齐的文本，但没有任何工作。

const Header = () => {
  return (
    <div>
      <h1 className="display-3"> lists</h1>
      <br />
      <div className="popularHeader">
        <h1 className="display-4"> Popular List </h1>
      </div>
      <div className="allHeader">
        <h1 className="display-4"> 2nd List </h1>
      </div>
    </div>
  );
};

export default Header;

我希望两个列表并排显示。

Answer 1

如果我正确理解，您希望将两个列表并排显示，标题位于顶部。

看看这个：

render() {
  return (
    <div>
      <h1>Reddit lists</h1>
      <div style={{display: "flex"}}>
        <div style={{flex: 1}}>
          <h1>Popular List</h1>
          <PopularList populars={this.state.populars} />
        </div>
        <div style={{flex: 1}}>
          <h1>2nd List</h1>
          <NewList ambers={this.state.ambers} />
        </div>
        <Header />
      </div>
    </div>
  );
}

Answer 2

您的头在单独的组件中，列表在另一个组件中。我建议创建一个组件<PopularList>，其中包含它的头，后面跟着相应的list元素，另一个组件<AnotherList>，在它里面有自己的标头，再后面跟着相应的列表。

然后将两个组件放置在单独的<div>中，使用CSS的float属性将它们并排放置。(要获得正确的UI结构，请查看是否可以使用引导网格系统(如果允许的话)