将带有标签的输入与没有标签的按钮对齐（垂直）

Question

我想对齐输入，它有两个标签，一个按钮没有任何标签，因此它们都在同一级别。

这是预期的效果：

这是我到目前为止所得到的：

我已经设法通过在按钮之前添加带有空格的标签来查看我想要的内容，这并不理想。

这是代码：

<Form>
<Form.Group widths='four'>
    <Form.Field>
        <Form.Input type='number' label='Input'/>
            <label>We can't find any matches.</label>
    </Form.Field>
    <Form.Field>
        <Button primary>Search</Button>
    </Form.Field>
</Form.Group>

谢谢你的帮助

编辑：这是CodeSandbox的链接：https://codesandbox.io/s/v6kkmyzyr0

Answer 1

我认为这是一个样式问题，它取决于您使用的设计框架（如果您使用的是）。

回答你的问题你可以使用flex来水平对齐项目这是代码：https://codesandbox.io/s/1oro0o6943

import React from "react";
import { render } from "react-dom";
import { Button, Form } from "semantic-ui-react";

const App = () => (
  <Form>
    <Form.Group widths="four" style={{ display:"flex", flexDirection:"row", alignItems:"center",  }}>
      <Form.Field>
        <Form.Input type="number" label="Input" />
        <label>We can't find any matches.</label>
      </Form.Field>
      <Form.Field>
        <Button primary>Search</Button>
      </Form.Field>
    </Form.Group>
  </Form>
);

render(<App />, document.getElementById("root"));

我用内联样式制作了它，但你可以用几种方式来管理它！

Answer 2

尝试使用flex

   <Form.Group widths='four'>
      <div style="display: flex;  flex-direction:row; height 
         auto;  align-items: 
      center">
           <Form.Field>
               <Form.Input type='number' label='Input'/>
               <label>We can't find any matches.</label>
           </Form.Field>
           <Form.Field>
               <Button primary>Search</Button>
            </Form.Field>
        </div>
    </Form.Group>