Как разместить два элемента JSX рядом друг с другом? - PullRequest
Новая
       12

Как разместить два элемента JSX рядом друг с другом?

1 голос
/ 28 октября 2019

Я не могу понять, как расположить эти элементы рядом друг с другом, используя встроенные стили.

В данный момент все кнопки и раскрывающиеся списки расположены друг над другом. Мне бы хотелось, чтобы это было 

Test Run Information                     | Previous | Show 25 | Next |

в одной строке.

Я использую React с CoreUI. Ниже приведен заголовок карты, а также снимок экрана 

<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>

Текущий отвратительный макет

Слишком много дополнительного пространства и смещение. Я бы хотел, чтобы все было в порядке.

Спасибо

Ответы [ 2 ]

0 голосов
/ 28 октября 2019

Я бы порекомендовал вам обернуть эти 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>
0 голосов
/ 28 октября 2019

Попробуйте оформить их: 

display: inline
...