Statisches Textelement zwischen zwei md-Eingabebehältern

Question

Ich verwende Angular Material und habe ein paar ausgewählte Eingaben in einem Formular, das ich mit einem Stück statischem Text trennen möchte.

Beide Selects sind in md-input-containern und so muss der Text, der zwischen den beiden liegt, die gleiche Padding haben, so musste ich einen weiteren Eingabebehälter verwenden, um den statischen Text wie folgt zu halten:

<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

Es fühlt sich ein bisschen hacky, und ich fragte mich, ob jemand irgendwelche bessere Vorschläge hatte.

Ich möchte nicht, dass der Text irgendeine Grenze hat, ich weiß, ich könnte einfach mein eigenes CSS rollen, aber ich fragte mich, ob es einen Weg aus der Box mit dem AM-Framework gab?

Answer 1

Es ist sehr einfach. Verwenden Sie einfach span Element mit layout-align Attribut auf Elternelement.

Hier ist der Code

<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> 

Hier arbeitet Beispiel. http://codepen.io/next1/pen/PzbXpv