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

Question

我正在尝试将 Headerelement 放在 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 组件显示为块

只需尝试编辑它的 css 并制作：

display: inline-block;

它应该会成功渲染

不幸的是，您的示例代码没有加载，所以我无法尝试，但它应该可以工作