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

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

尝试使用弹性

   <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>