Question

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

我正在React中在语义UI中设置选择表单组。但是，对齐方式在水平方向上是不对齐的，因此“广播”选择项漂浮在输入字段上方（请参见附图）。

如何对齐它们？我更喜欢使用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"实现垂直对齐。问题在于，默认情况下，语义`字段具有边距。我们只能通过添加一个类并为一个参数编写额外的CSS来克服这一问题：

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

（请参阅codepen：https://codesandbox.io/s/m3y9zpw358）

元素的水平对齐-语义UI反应

2 个答案: