一行中的文本字段，图标和标签

Question

我正在使用react-reduxm office-fabric-ui。这是我的代码：

<Icon className="delete-transform-icon" iconName="Delete" />
<Dropdown
   className="modal-value-transform-type-dropdown"
   label={translate("transformTypeLabel")}
   placeHolder={this.state.transform.transformType}                     
   ariaLabel={translate("transformTypeLabel")}
/>
 <br />
<TextField
    className="modal-value-transform-type-TextField"
    label={translate("transformDefaultValue")}
    ariaLabel={translate("transformDefaultValue")}
    placeholder={this.state.transform.defaultValue}
 /> 

它有5行。

但是我希望它们像这样的一行 我该怎么办？

Answer 1

我建议删除br并使用任何GRID LAYOUT，例如 bootstrap ， material-ui 等。它易于管理。列中的元素。 您可以执行以下操作：

<div className='row'>
  <div className = 'col-4'></div>
  <div className = 'col-4'></div>
  <div className = 'col-4'></div>
</div>

这只是一个基本示例，您可以利用网格布局的功能。大多数UI库具有12列/行网格布局。我希望这会有所帮助。