2つのmd入力コンテナ間の静的テキスト要素

Question

私は角度のある素材を使用しています。静的なテキストで区切りたい形式で2つの選択入力があります。

選択肢は両方ともmd-input-containersにあります。したがって、2つの間にあるテキストは同じパディングを持つ必要がありますので、静的テキストを保持するためにさらに入力コンテナを使用する必要があります。

<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を転がすことができると知っていますが、午前のフレームワークを使用する方法があるのか​​どうか疑問に思いましたか？

Answer 1

非常に簡単です。親要素のlayout-align属性を持つspan要素を使用してください。

は、ここでは、コード

<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