如何在 React JS 中水平对齐 div？

Question

下面只是我的代码片段：

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

我试过这个，但它显示为垂直。下面附上图片

Answer 1

与 React 无关，与 CSS 无关：

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

一种方法是在 CSS 中执行此操作：

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

Answer 2

这不是 Reactjs 的问题。使用 CSS 来做到这一点。display:inline

 display: flex

 display: flex

div{
    display: flex;
}

或使用 display:inline

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

div{
    display: inline
}