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

我如何轻松地将带有Fluid属性的输入与grid.column中的Icon对齐？

1 个答案: