Выровнять ввод с метками на кнопке без метки (по вертикали)

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>