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

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>