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