MD輸入容器和標籤不對齊

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一點？

理想情況下，我希望「價格」和「要」與「11990」和「247900」對齊。如何做到這一點（使用Flexbox）？

感謝

Answer 1

對於那些誰知道到對準MD-輸入容器

創建CSS屬性text：

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