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

Question

我正在尝试添加多个表单字段，我想在一行中添加 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>

堆栈闪电战：https://stackblitz.com/edit/angular-rqczqy

我想在"你叫什么名字"和"你好"之间留出空格

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

Answer 1

您可以使用flexbox来解决此问题。我分叉了你的堆栈闪电战。这是众多解决方案之一：内联垫输入

模板

<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;
}

Answer 2

我解决这个问题的最简单方法如下：

`<mat-form-field class="input-spacer">
...
</mat-form-field>`

在.css

.input-spacer { padding-right: 10px; }