如何在语义UI中将两个项目彼此对齐？

Question

我正在尝试将一个Header元素放置在一个Button图标旁边，但是我无法实现。

不尝试任何网格将其列出为这样

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

使它看起来像这样-每个项目都在不同的行上：

如果我尝试制作一个具有一行和两列的网格，那么在两者之间会有很大的空间，并且标题文本也会被换行。我猜至少是垂直对齐的...

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

如下所示：

我真的很想听听关于如何使两个物品正确并排放置的建议。我想使它看起来像这样：

示例代码https://codesandbox.io/s/semantic-ui-react-example-ttnxc（不确定为什么图标未在那里渲染）。

Answer 1

实际上我认为Header Component显示为块

只需尝试编辑它并制作：

display: inline-block;

它应该成功呈现

很遗憾，您的示例代码未加载，因此我无法尝试，但它应该可以工作