如何在菜单栏中居中语义-ui-react 表单？

Question

我在菜单栏中有一个语义-ui-反应形式LocationSearchForm，如下所示：

我把LocationSearchForm放在<Menu.Item>

里面

<Menu.Item>
    <LocationSearchForm />
</Menu.Item>

但是如您所见，表单并未垂直居中。其他的menu.item比如链接，signin和signout都是完美居中的，只是这个表格显示有点问题。我怎样才能让它垂直居中？谢谢！

Answer 1

您 space 低于 input，因为当您写入时，

<Form>
    <Form.Field>
      <input placeholder='Your City' />
    </Form.Field>
</Form>

您的 Form.Field 获得 margin-bottom : 1rem。

您需要删除 margin。简单的方法是内联样式，

<Form.Field style={{marginBottom:'0'}}>

或者您可以分配一个 class-name，然后为该 class-name 写 CSS。