[英]How to position my elements horizontally in react with css
我有组件在我的应用程序中查看时垂直放置,我希望它是水平的。 我应该将 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}
/>
)
)
}
您可以将 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";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.