Как совместить два элемента рядом друг с другом в семантическом интерфейсе? - PullRequest
Новая
       28

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

1 голос
/ 14 июня 2019

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

Без каких-либо попыток перечислить их как гриды 

<Header as='h4'>Header text</Header>
<Button icon className='transparentButton'>
   <Icon name='add'/>
</Button>

выглядит так - каждый элемент в отдельной строке: enter image description here

Если я попытаюсь создать сетку с одной строкой и двумя столбцами, между ними будет большое пространство, а также текст заголовка будет обернут. По крайней мере, по вертикали, я думаю ... 

<Grid>
  <Grid.Row verticalAlign='middle'>
    <Grid.Column>
      <Header as='h4'>Header text</Header>
    </Grid.Column>
    <Grid.Column>
      <Button icon className='transparentButton'>
                      <Icon name='add'/>
                    </Button>
    </Grid.Column>
  </Grid.Row>
</Grid>

Это выглядит так: enter image description here

Мне бы очень хотелось услышать, как предложения о том, как правильно расположить два предмета рядом друг с другом. Я хочу, чтобы это выглядело так:

enter image description here

Пример кода https://codesandbox.io/s/semantic-ui-react-example-ttnxc (хотя не уверен, почему Иконка там не отображается).

1 Ответ

1 голос
/ 14 июня 2019

На самом деле я думаю, что компонент заголовка отображается как блок

Просто попробуйте отредактировать его css и сделайте: 

display: inline-block;

, и он должен успешно отрендерить

к сожалению, вашпример кода не загружается, поэтому я не могу попробовать это, но оно должно работать

...