md-input-container和标签未对齐

Question

我正在尝试为价格创建过滤器，而我仍然坚持正确对齐这些元素。

使用此代码：

<div formGroupName="price.baseMSRP" fxLayout="row">
    <span>Price</span>

    <md-input-container>
        <input mdInput type="number" min="{{data.price.min}}" max="{{data.price.max}}" step="1000"
               placeholder="Min:" value="{{data.price.min}}" formControlName="$gte" (change)="onUpdate(form.value)" />
    </md-input-container>
    <span>to</span>
    <md-input-container>
        <input mdInput type="number" min="{{data.price.min}}" max="{{data.price.max}}" step="1000"
               placeholder="Max:" value="{{data.price.max}}" formControlName="$lte" (change)="onUpdate(form.value)" />
    </md-input-container>
</div>

产生这个结果：

如何编辑HTML / CSS以使其外观更加一致并将它们分开？

理想情况下，我希望“Price”和“to”与“11990”和“247900”对齐。如何做到这一点（使用Flexbox）？

由于

Answer 1

对于那些想要将文本与md-input容器对齐的人

创建一个css属性：

.range-to {
    padding-top: 13px;
    padding-left: 20px;
}

Answer 2

使用

fileCreated