在同一行显示 2 个输入

【问题标题】：Display 2 inputs in the same line在同一行显示 2 个输入
【发布时间】：2021-11-19 12:58:43
【问题描述】：

我有这个代码：

<mat-form-field>
  <div fxFlex="50%">
     <input
        matInput
        formControlName="field1"
        required
        type="number"
        min="0"
     />
     <span matSuffix>h</span>
  </div>
  <div fxFlex="50%">
     <input
        matInput
        formControlName="field2"
        required
        type="number"
        min="0"
     />
     <span matSuffix>min</span>
  </div>
  <mat-icon matSuffix>access_time</mat-icon>
  <mat-error>Required</mat-error>
</mat-form-field>

显示是这样的：

我想将所有项目放在一行中，我尝试使用显示块、内联块，但没有按预期工作。

【问题讨论】：

尝试将display:flex 设置为<mat-form-field>
显示效果更差......
你能在stackbitz或codesandbox中制作吗？
dispaly: flex 或者不要将它们包装在 div 中并保持正常的内联行为。

标签： html css angular angular-material angular8

【解决方案1】：

用mat-form-field 单独包装每个输入，现在用div 包装mat-form-field 也适用display: flex 样式。

<div style="display: flex;">
  <!-- Field 1 -->
  <mat-form-field>
    <input
           matInput
           formControlName="field1"
           required
           type="number"
           min="0"
           />
    <span matSuffix>h</span>
    <mat-icon matSuffix>access_time</mat-icon>
    <mat-error>Required</mat-error>
  </mat-form-field>

  <!-- Field 2 -->
  <mat-form-field>
    <input
           matInput
           formControlName="field2"
           required
           type="number"
           min="0"
           />
    <span matSuffix>min</span>
    <mat-icon matSuffix>access_time</mat-icon>
    <mat-error>Required</mat-error>
  </mat-form-field>
</div>

如果您希望mat-form-field 都占用50% 的可用宽度，则将flex-basis: 100% 添加到mat-form-field。

【讨论】：