角材料微调器与输入字段内联

Question

我正在输入字段下生成一堆按钮，当输入正确的数字时，该按钮将递减至0。我想在“ n s left”显示旁边（水平旁边）添加一个进度条。我目前有：

  <mat-card class="card mat-elevation-z5">
      <mat-form-field>
        <mat-label>Username</mat-label>
        <input id="nameInput" matInput>
        <p matSuffix>{{timeLeft}}s left</p>
        <mat-spinner [diameter]="40"></mat-spinner>
      </mat-form-field>  
     <mat-button-toggle 
        *ngFor="let button of buttonsFromApi" 
        id="{{button.id}}">
        {{button.displayName}}
      </mat-button-toggle>
</mat-card>

我的问题是，无论如何尝试，微调器最终都会出现在文本下方，而不会出现在文本下方。我已经尝试过将flexbox，额外的div，不同的布局组合在一起，但从未奏效。。。如何确保输入框居中并与所有按钮（在一列中）对齐，同时紧接着有一个微调器倒计时？例如。我有：

我想要：

CSS：

.card {
    min-width: 50%;
    display: flex;  
    flex-flow: column wrap;
  }
mat-form-field {
    font-size: 2em;   
    min-width: 50%;
}

Answer 1

您可以尝试以下操作：

<p matSuffix style="display: inline;">{{timeLeft}}s left</p>
<mat-spinner matSuffix [diameter]="18" style="float: right; margin-left: 8px"></mat-spinner>

您还可以将<p>标记替换为默认内联的<span>。

感谢Md. Rafee的实时示例：stackblitz