我无法弄清楚如何使用内联样式将这些元素彼此相邻。
现在,按钮和下拉菜单都堆叠在一起。 我希望成为
Test Run Information | Previous | Show 25 | Next |
全部在同一行内。
我在CoreUI上使用React。这是下面的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>
有太多的额外空间和未对齐。我想要所有东西。
谢谢
答案 0 :(得分:0)
尝试设置样式:
id
答案 1 :(得分:0)
我建议您将这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>