Semantic-UI-react表单元素水平对齐异常的解决方法

嘿，我之前也碰到过一模一样的情况——用Semantic-UI构建选择表单组时，单选框直接飘到了输入框上方，完全没法水平对齐。试了Grid、Menu这些容器都没解决，后来发现Semantic-UI本身就有原生的解决方案！

你只需要给<Form.Group>加上inline属性，就能让所有表单字段自动在同一行水平对齐，完美搞定你说的问题。

修改后的完整代码： #

<Form.Group inline>
  <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.Field>
    <Input/>
  </Form.Field>
</Form.Group>

另外你之前加的<Divider vertical hidden />可以删掉啦，inline属性会自动帮我们处理元素的排列和对齐，不需要额外的分隔元素来调整布局。

内容的提问来源于stack exchange，提问作者Thjen