Как избежать переноса строк в форме, созданной с помощью машинописи?

Question

Я работаю над ReactJS проектом. Цель проста: Я хочу, чтобы все три <FormItem> отображались в одной строке без переноса. Вместо этого я получаю следующий вывод:

В myComponent.tsx у меня есть следующая render() функция:

render() {
  const { getFieldDecorator } = this.props.form;
  const formItemLayoutType = {
          labelCol: { span: 1, offset: 0 },
          wrapperCol: { span: 3, offset: 0 },
  };
  const myForm = {
         display: "inline",
         whiteSpace: "nowrap"
  } as React.CSSProperties;

  return (
    <Form onSubmit={this.handleSubmit} style={myForm}>
     <span>
      <FormItem 
       // {...formItemLayoutType}  // originally, this was not commented out
       hasFeedback
      >
         {getFieldDecorator('select', { valuePropName: "fileType" })(
                        <Select placeholder="Select file type" style={{ width: "150px" }}>
                            <Option value="PD">Probabilty of default</Option>
                            <Option value="FX">Exchange Rate</Option>
                        </Select>
                        )}
      </FormItem>
      <FormItem>
         <Button type="primary" htmlType="submit"
                 disabled={this.disabledImportButtonChecker()}>Import</Button>
      </FormItem>
     </span>
    </Form>
  );
 }
}

Я добавил <span> и style={myForm}, остальная часть кода историческая c. Я просто не могу понять, почему он все еще выглядит следующим образом, а не все горизонтально расположено.

Ссылки

• Предотвращение разрыва строки между двумя тегами предлагает использовать display: inline.
• https://alligator.io/css/prevent-line-break/

Answer 1

Измените <span> на <div> и присвойте ему стиль display: flex;

См. Пример (для простоты я добавил встроенный стиль, вы должны расположить его так, как вы делаете все свои стили)

//** inline style for simplicity **//
<span style={{display:"flex"}}>
    <FormItem 
        // {...formItemLayoutType}  // originally, this was not commented out
        hasFeedback
    >
        {getFieldDecorator('select', { valuePropName: "fileType" })(
            <Select placeholder="Select file type" style={{ width: "150px" }}>
                <Option value="PD">Probabilty of default</Option>
                <Option value="FX">Exchange Rate</Option>
            </Select>
        )}
    </FormItem>
    <FormItem>
        <Button type="primary" htmlType="submit"
            disabled={this.disabledImportButtonChecker()}>Import</Button>
    </FormItem>
</span>