Angular

Question

目前下面的代码呈现为 3 行。

<div fxLayout="column">
    <label>Some Label</label>
    <mat-form-field class="hide-underline" floatLabel="never">
        <input formControlName="elementA" matInput readonly> 
        <input formControlName="elementB" matInput readonly> 
        <input formControlName="elementC" matInput readonly>
    </mat-form-field>
</div>

我怎样才能像这样在一行上渲染：elementA-elementB-elementC 而不是？

Answer 1

您可以设置一个 css 类似 display: flex 的 mat-form-field 来让它们在同一行呈现

Answer 2

    <mat-form-field class="hide-underline" **class='display:flex'** floatLabel="never">

Answer 3

由于您使用的是 @angular/flex-layout，因此您应该在每个 <input> 上添加 fxFlex，以便它们显示在同一行。

<div fxLayout="column">
    <label>Some Label</label>
    <mat-form-field class="hide-underline" floatLabel="never">
        <input fxFlex formControlName="elementA" matInput readonly> 
        <input fxFlex formControlName="elementB" matInput readonly> 
        <input fxFlex formControlName="elementC" matInput readonly>
    </mat-form-field>
</div>

StackBlitz working example: https://stackblitz.com/edit/angular-Whosebug-60732248

Angular - 如何将 3 个 formControlName 渲染到 1 行？

Angular - how to render 3 formControlName onto 1 line?

angular-flex-layout