How to align div horizontally in React JS?

Question

Below is just a snippet of my code:

return(
     <div className='row'>
         <div>row1</div><div>row2</div><div>row3</div>
     </div>
);

I tried this, but it displays in vertical. Image attached below

this is not related to reactjs, you need to apply css properties to achieve this. — Mayank Shukla, Jun 29 '17 at 06:51
This is a CSS issue. Take a look at css flexbox or css grid, either of which shoud allow you to do what you're attempting. — Drum, Jun 29 '17 at 07:02
Mayank. I saw that answer previously. This is related to react js — Kangkan, Jun 29 '17 at 07:13

score 6 · Answer 1 · edited Feb 07 '21 at 10:13

6

It is not Reactjs problem. use CSS to do that. display:inline

 display: flex

div{
    display: flex;
}

<div className='row'>
     <div>row1</div><div>row2</div><div>row3</div>
</div>

OR use display:inline

div{
    display: inline
}

<div className='row'>
    <div>row1</div><div>row2</div><div>row3</div>
</div>

edited Feb 07 '21 at 10:13

Olcay Ertaş

answered Jun 29 '17 at 06:54

Dinesh undefined

score 6 · Accepted Answer · answered Jun 29 '17 at 06:55

6

Nothing to do with React, but CSS :

 <div className='rows'>
     <div className='row'>row1</div>
     <div className='row'>row2</div>
     <div className='row'>row3</div>
 </div>

One way to do it, in your CSS :

 .rows .row {
    display: inline-block;
 }

answered Jun 29 '17 at 06:55

Alexis Facques

2 Answers2