如何避免在使用打字稿生成的表单中换行？

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}，其余代码都是历史性的。我只是想不通为什么它仍然看起来如下而不是水平排列。

参考文献

• Prevent <form> line break between two <form> tags 建议使用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>