如何轻松地将输入与fluid属性以及grid.column中的Icon对齐？

Question

我正在尝试做一些非常基本的事情，在右边的一个简单的Button / Icon旁边有一个语义UI控件。我正在网格中工作，我希望它上面的fluid属性填满空间，但我希望图标/按钮保持对齐。

无论我尝试过什么，按钮/图标总是包含在下一行。我试过把它包装成没有运气。我完成它的唯一方法是创建另一个中间列并将按钮/图标放入其中，但这有间距问题需要处理。

这应该很容易，我缺少什么？

        <Grid.Column width={7}>
                <Input icon label="Current User" fluid/>
                <Button icon basic><Icon name="user" /></Button>
       </Grid.Column>

wrapping icon

Answer 1

如何将其作为输入字段的一部分？根据语义ui文档，您可以执行以下操作：

<Input label fluid>
  <Label>Current user</Label>
  <input />
  <Button icon>
    <Icon name="user" />
  </Button>
</Input>

在这里看到：https://codesandbox.io/s/l25qk539xl