与输入字段内联的 Angular Material 微调器

Question

我在输入字段下生成一堆按钮，当输入正确的数字时，这些按钮会倒计时到 0。我想在“ns 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>

我的问题是，无论我如何尝试，微调器最终都会在文本下方，而不是在它旁边。我尝试了 flexboxes、附加 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