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

Question

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

我正在 React 中设置一个语义选择表单组 UI。然而，对齐是水平的，因此单选选项浮动在输入字段上方（见附图）。

如何对齐它们？我更喜欢语义-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"实现垂直对齐。问题是，每个默认的语义字段都有边距。我们只能通过添加一个 class 并写一个额外的参数 css:

来克服这个问题

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

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

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

Horizontal alignment of elements - Semantic-UI-react

reactjs

semantic-ui

semantic-ui-react