如何将两个 JSX 元素并排放置？答案

【问题标题】：How do I place two JSX elements next to each other?如何将两个 JSX 元素并排放置？
【发布时间】：2020-02-24 01:33:06
【问题描述】：

我不知道如何使用内联样式将这些元素放在一起。

现在，按钮和下拉菜单都堆叠在一起。我希望它是

Test Run Information                     | Previous | Show 25 | Next |

都在同一行中。

我正在将 React 与 CoreUI 一起使用。这是下面的 CardHeader 以及屏幕截图

<CardHeader style={{alignItems:"center"}}>

<h5 style={{float:"left",marginTop:10}}> {this.props.header} </h5>
<nav style={{float:"right",marginTop:10}}>
    <ul class="pagination" >
        <li class="page-item"><a class="page-link" href="javascript:void(0)" onClick={() => {this.prevPage()}}>Previous</a></li>
    </ul>
    <Input type="select" name="selectSm" id="SelectLm" bsSize="sm"  >
    <option key="Default" value=''>Show 25</option>
    </Input>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="javascript:void(0)" onClick={() => {this.nextPage()}}>Next</a></li>
    </ul>
</nav>
</CardHeader>

Current hideous layout

有太多的额外空间和错位。我想要所有的东西。

谢谢

【问题讨论】：

标签： css reactjs jsx core-ui

【解决方案1】：

我建议您将这 3 个元素包装在 flexbox 父容器中：

.container {
  display: flex;
  flex-direction: row; 
  justify-content: flex-end;
}

在你的组件上，

<CardHeader style={{alignItems:"center"}}>

<h5 style={{float:"left",marginTop:10}}> {this.props.header} </h5>
<nav style={{float:"right",marginTop:10}}>
<div className="container">
  <ul class="pagination" >
    <li class="page-item"><a class="page-link" href="javascript:void(0)" onClick={() => {this.prevPage()}}>Previous</a></li>
  </ul>
  <Input type="select" name="selectSm" id="SelectLm" bsSize="sm"  >
  <option key="Default" value=''>Show 25</option>
  </Input>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0)" onClick={() => {this.nextPage()}}>Next</a></li>
  </ul>
</div>
</nav>
</CardHeader>

【讨论】：

谢谢，将它添加到我的主 CSS 并使用
如何使每个项目的高度相同？下拉菜单与按钮不同
嗯.. 你试过切换按钮的 CSS 属性吗？并将它们设置为相同的值？

【解决方案2】：

尝试为它们设计样式：

display: inline

【讨论】：