如何水平放置我的元素以与 CSS 做出反应

Question

我的组件在我的应用程序中查看时是垂直放置的，我希望它是水平放置的。我应该将 css 属性应用到哪个组件，它会是什么？

谢谢

主成分

    import React from 'react'
import Tournament from './Card.jsx'
import Tournaments from './ListTournaments.jsx'
import Carousel from './Carousel.jsx'
import '../resources/styles/grid.css'
import Header from './Header.jsx'
import Modal from './Modal.jsx'
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";


const App = () => (
  <div>
    <Header />
    <Switch>
      <Route
       exact path="/"
      >
        <Carousel/>


      </Route>
      <Route
        path = "/tournaments"
      >

      <Tournaments/>


      </Route>
    </Switch>
  </div >
)

export default App

垂直显示的组件

import React from 'react';
import Tournament from './Card.jsx'
var tournaments = require('../resources/data/tournament.json')

export default function ListTournaments(props) {


  return (
    tournaments.map((
      tournament,index )=>
        <Tournament
          title={tournament.title}
          description={tournament.description}
          requierements={tournament.requierements}
          date={tournament.date}
          img={tournament.img}
          key = {index}

        />

    )
  )
}

Answer 1

您可以将 ListTournaments 组件的项目包装到一个 div 中，并通过 css 使其成为一个 flexbox。

=> 从 ListTournaments 中返回它

return (
    <div className="tournaments-list">
      tournaments.map((
        tournament,index )=>
          <Tournament
            title={tournament.title}
            description={tournament.description}
            requierements={tournament.requierements}
            date={tournament.date}
            img={tournament.img}
            key = {index}

          />

      )
     </div>
    )

添加这个 css（或类似的，例如网格）

.tournaments-list{
    display: "flex";
}