如何在 mat-form-field 元素中的下划线类之间添加空格？

【问题标题】：How to add space between underline classes in mat-form-field elements?如何在 mat-form-field 元素中的下划线类之间添加空格？
【发布时间】：2018-09-20 11:02:41
【问题描述】：

我正在尝试添加多个表单域，我想连续添加 2 个表单域，但我无法在表单域之间添加空格（无法分隔下划线）

 <li>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

Stackblitz：https://stackblitz.com/edit/angular-rqczqy

我想在“你叫什么名字”和“你好”之间留一个空格

我怎样才能做到这一点？任何帮助将不胜感激！

【问题讨论】：

标签： angular forms angular-material angular-material-5

【解决方案1】：

您可以使用flexbox 解决此问题。我分叉了你的堆栈闪电战。这里是众多解决方案之一：Inline matInput

模板

<li class="mat-form-field--inline">
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

CSS

.mat-form-field--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mat-form-field--inline .mat-form-field {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

.mat-form-field--inline .mat-form-field:nth-child(1) {
    margin-right: 10px;
}

【讨论】：