Css 如何使用角材质在同一行中显示标签和选择框？

我用角材料搜索了将

输入

和

标签

保持在同一行，但没有得到任何答案。解决方案只有在html和css，但在这里我在角材料的方式需要

我用

grid

和

flex-layout

实现它的尝试是

示例：

Lorem ipsum dolor sit amet，一种类似海洋的早期装饰，在海洋中重现。多洛尔·普坦特·劳拉莫斯·迪奥在。不动产医生。在vero illum vocent vis。我爱你。
A.
B
C
D
Lorem ipsum dolor sit amet，一种类似海洋的植物。
E
F
G
H

在这里，我为每个元素重复了

mat grid list

，

mat grid title

，

cols

，

行高

，我认为这不是实现它的正确方法

在

mat grid tile

中，我有非常长的文本，我需要将其作为标签放置在左侧，选择框属于右侧的文本

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

我想显示与下面给出的图像完全相同的图像，仅使用角度材质，而不使用任何其他库

使用

flexLayout

的原因也是为了使整个表单具有响应性，这也是该设计的主要重要特征

可能我对这种方法完全错了，所以对上述示例代码的任何修改或不同方法都是受欢迎的

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

---

最后，预期结果与上图相同。

这是您希望使用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>

Lorem ipsum dolor sit amet，一种类似海洋的早期装饰，在海洋中重现。多洛尔·普坦特·劳拉莫斯·迪奥在。不动产医生。在vero illum vocent vis。我爱你。
A.
B
C
D
A.
B
C
D
挑选

---

链接以获取更多详细信息

我已在此处实现了您的代码，这与预期不符。。即使在更大的屏幕上，选择框也会显示在下方。。我想要的结果与问题中显示的图像完全一样..安装

import{FlexLayoutModule}来自'@angular/flex layout'您可以在此处下载表单。标签在下方，选择框显示在顶部，我要求您使用代码生成stackblitz，您给出的解决方案与上图所示不一样。。对于更大的屏幕，标签和选择框应该在同一行。很抱歉，idk如何生成
堆栈闪电战
，但您可以将我的代码粘贴到这里，并且工作正常
<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>