reactjs - 将带有标签的输入与没有标签的按钮对齐(垂直)

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"));

我已经使用内联样式实现了它，但您可以通过多种方式来管理它!