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

Question

我正在尝试让 Header 元素位于 Button 图标旁边，但我做不到。

没有尝试像这样列出它们的任何网格

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

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

如果我尝试制作一个包含一行两列的网格，则两者之间有一个巨大的 space，并且 header 文本被换行。我猜至少是垂直对齐的...

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

它应该会成功渲染

不幸的是你的示例代码没有加载所以我不能尝试这个但它应该工作

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

How to align two items next to each other in Semantic UI?

css

semantic-ui

semantic-ui-react