css - 如何使用 Angular Material 在同一行显示标签和选择框？

Question

我搜索过使用 Angular Material 将 input 和 label 保持在同一行，但没有得到任何答案。解决方案仅在 html 和 css 中可用，但在这里我需要 Angular Material 方式。

我尝试使用 grid 和 flex layout 来实现它，就像是，

示例: https://stackblitz.com/edit/angular-btjbqw-6vykln

      <mat-grid-list cols="10" rowHeight="2:2">
        <mat-grid-tile colspan='2'>
          Lorem ipsum dolor sit amet, an sea similique maiestatis inciderint, decore recusabo sea in. Dolore putant laboramus duo in. Mundi doctus aliquid ut ius. At vero illum vocent vis. Ius eros argumentum cu. 
        </mat-grid-tile>
        <mat-grid-tile colspan='8' fxFlex>
        <mat-form-field  class="input-row" appearance="outline">
            <mat-select placeholder="Expenses" formControlName="expenses" required>
              <mat-option value="1">a</mat-option>
              <mat-option value="2">b</mat-option>
              <mat-option value="3">c</mat-option>
              <mat-option value="4">d</mat-option>
            </mat-select>
        </mat-form-field>
        </mat-grid-tile>    
      </mat-grid-list>

      <mat-grid-list cols="10" rowHeight="2:2">
        <mat-grid-tile colspan='2'>
          Lorem ipsum dolor sit amet, an sea similique maiestatis inciderint. 
        </mat-grid-tile>
        <mat-grid-tile colspan='8' fxFlex>
        <mat-form-field  class="input-row" appearance="outline">
            <mat-select placeholder="Operating Adjustments" formControlName="operatingAdjustments" required>
              <mat-option value="1">e</mat-option>
              <mat-option value="2">f</mat-option>
              <mat-option value="3">g</mat-option>
              <mat-option value="4">h</mat-option>
            </mat-select>
        </mat-form-field>
        </mat-grid-tile>    
      </mat-grid-list>

我在这里为每个元素重复 mat-grid-list 、mat-grid-title、cols、rowHeight 对于每个元素，我认为这不是实现它的正确方法。

在 mat-grid-tile 中，我有很长的文本，我需要将其作为标签放在左侧，选择框属于右侧的标签。

同样，我有更多的案例，因为有些标签文本很大，有些文本可能很小。因此选择框需要与其相对应的中心对齐。

我想在不使用任何其他库的情况下单独使用 Angular Material 来显示与下面给出的图像完全相同的图像。

使用 flexLayout 的原因也是为了使整个表单响应式，这也是此设计的主要重要特征。

可能我对这种方法完全错误，所以也欢迎对示例中的上述代码进行任何修改或不同的方法。

在我的示例中，我有很多用于此设计的代码(主要是相同代码的重复)，请帮助我使用一些没有任何性能问题的优化代码来实现结果。

最终的预期结果与上图相同。

Answer 1

这就是你想要使用 flex 的布局!

fxLayout.lt-sm="column" 用于小型设备将行转换为列。

<div fxLayout="row" fxLayout.lt-sm="column"  fxLayoutAlign="flex-start center" class="full-width">
  <div fxFlex>
    Lorem ipsum dolor sit amet, an sea similique maiestatis inciderint, decore recusabo sea in. Dolore putant laboramus duo in. Mundi doctus aliquid ut ius. At vero illum vocent vis. Ius eros argumentum cu.
  </div>
  <div fxFlex>
    <div fxLayout="row" fxLayoutAlign="flex-start center" class="full-width">
      <div fxFlex>
        <mat-form-field class="input-row" appearance="outline">
          <mat-select placeholder="Expenses" formControlName="expenses" required>
            <mat-option value="1">a</mat-option>
            <mat-option value="2">b</mat-option>
            <mat-option value="3">c</mat-option>
            <mat-option value="4">d</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="flex-start center" class="full-width">
      <div fxFlex>
        <mat-form-field class="input-row" appearance="outline">
          <mat-select placeholder="Expenses" formControlName="expenses" required>
            <mat-option value="1">a</mat-option>
            <mat-option value="2">b</mat-option>
            <mat-option value="3">c</mat-option>
            <mat-option value="4">d</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div fxFlex>
        Select
      </div>
    </div>
  </div>
</div>

更多详情链接 https://github.com/angular/flex-layout/wiki/Responsive-API