文章/答案/技术大牛

发布

社区首页 >问答首页 >角-如何在1行上渲染3 formControlName？

问角-如何在1行上渲染3 formControlName？
EN

Stack Overflow用户

提问于 2020-03-18 01:10:32

回答 3查看 122关注 0票数 0

当前，下面的代码呈现为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>

我怎样才能在一行上呈现，比如:元素A-元素B-元素C？

angular

angular-flex-layout

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-03-18 01:18:13

您可以将css设置为display: flex到mat-form-field，以便将它们呈现在同一行中。

票数 0

Stack Overflow用户

发布于 2020-03-18 01:32:58

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

票数 0

Stack Overflow用户

发布于 2020-03-18 01:49:00

由于您使用的是@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工作示例：https://stackblitz.com/edit/angular-stackoverflow-60732248

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60732248

复制

相似问题

问角-如何在1行上渲染3 formControlName？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角-如何在1行上渲染3 formControlName？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角-如何在1行上渲染3 formControlName？
EN