元素的水平对齐 - Semantic-UI-react

Question

解决方案：将“内联”添加到 Form.Group。代码笔：https://codesandbox.io/s/88v6zl66q8

我正在语义 UI 中设置一个选择表单组来响应。但是水平对齐是关闭的，因此 Radio 选择项浮动在输入字段上方（参见附图）。

如何对齐它们？我更喜欢 Semantic-UI 的方式，而不是编写自定义 CSS（但我愿意接受建议）。谢谢！

https://i.imgur.com/IW1imch.png

将元素放入 Grid 或 Menu 容器时，并不能解决问题。

<Form.Group>
                <Form.Field>
                    <Radio />
                <Divider vertical hidden />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Radio />
                </Form.Field>
                <Form.Field>
                    <Input/>
                </Form.Field>
            </Form.Group>

Answer 1

我认为最简单的方法是将它们放入display: flex 容器中，并在其上设置align-items: center，如here 所述。

Answer 2

不太确定，我是否明白你的意思。但是为了防止单选按钮漂浮在输入字段上方，您可以通过语义网格系统来排列它们：

<Form>
  <Grid>
    <Grid.Column width={8} stretched verticalAlign="middle">
      <Form.Group inline className="no-margin">
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
        <Form.Field><Radio /></Form.Field>
       </Form.Group>
    </Grid.Column>
    <Grid.Column width={8}>
      <Form.Field>
        <Input
          label="Anden værdi"
          name="n"
          type='text'
          labelPosition='right'
        />
      </Form.Field>
    </Grid.Column>
  </Grid>
</Form>

因此，您可以使用verticalAlign="middle" 实现垂直对齐。 问题是，每个默认 Semantic` 字段都有一个边距。我们只能通过添加一个类并编写一个额外的 css 参数来克服这个问题：

.no-margin {
  margin: 0 !important;
}

（参见代码笔：https://codesandbox.io/s/m3y9zpw358）