兩個md輸入容器之間的靜態文本元素

Question

我正在使用Angular Material並在窗體上有幾個選擇輸入，我想用一段靜態文本分開。

這兩個選擇都在md-input-containers中，因此位於兩者之間的文本需要具有相同的填充，所以我不得不使用另一個輸入容器來保存靜態文本，如下所示：

<div layout="row" flex layout-padding> 
    <md-input-container flex> 
     <label translate>Select 1</label> 
     <md-select ng-model="option1" flex> 
      <md-option ng-repeat="option in options"> 
      </md-option> 
     </md-select> 
    </md-input-container> 
    <md-input-container> 
     <label></label> 
     <input type="text" value="label" readonly> 
    </md-input-container> 
    <md-input-container flex> 
     <label translate>Select 2</label> 
     <md-select ng-model="option2" flex> 
      <md-option ng-repeat="option in options"> 
      </md-option> 
     </md-select> 
    </md-input-container> 
</div> 

Working fiddle

感覺有點哈克，我想知道如果任何人有什麼更好的建議。

我不想讓文字有任何邊框底部，我知道我可以只是推出我自己的CSS，但我想知道是否有使用AM框架的方式開箱？

Answer 1

這很簡單。只需在父元素上使用span元素和layout-align屬性。

下面是代碼

<div layout="row" flex layout-padding layout-align="start center"> 
    <md-input-container flex> 
    <label translate>Select 1</label> 
    <md-select ng-model="option1" flex> 
     <md-option ng-repeat="option in options"> 
     </md-option> 
    </md-select> 
    </md-input-container> 
    <span flex>Label</span> 
    <md-input-container flex> 
    <label translate>Select 2</label> 
    <md-select ng-model="option2" flex> 
     <md-option ng-repeat="option in options"> 
     </md-option> 
    </md-select> 
    </md-input-container> 
</div> 

這裏是工作實施例。 http://codepen.io/next1/pen/PzbXpv