ausrichten Eingabe mit Datumsauswahl und Text div

Question

ich eine Art Symbolleiste aufzubauen versuchen (ohne md-toolbar zu verwenden), bestehend aus den folgenden Teilen:

• input für die Suche nach einzigartiger ID
• datepicker für die Suche nach Datum
• ein div, span, label (oder was auch immer den Job tun würde) die Zahl der Suche zeigen Ergebnisse

Allerdings habe ich diese drei Elemente nicht richtig ausgerichtet.

Dies ist mein Code:

<md-content flex layout-padding> 
    <md-card> 
     <md-card-title> 
      <md-card-title-text> 
       <div class="md-headline">Simulationen</div> 
      </md-card-title-text> 
     </md-card-title> 
     <md-card-content> 
      <div layout="row"> 
       <md-input-container layout="row" flex="75"> 
        <label><span class="fa fa-search"> </span>Suche nach ID</label> 
        <input ng-model="simSearch.input"> 
       </md-input-container> 
       <md-datepicker ng-model="simSearch.date" md-placeholder="Datum wählen"></md-datepicker> 
       <div flex="20">Number of search results</div> 
      </div> 
     </md-card-content> 
    </md-card> 
</md-content> 

Um dies zu jedermann zugänglich zu machen, habe ich ein Pen auf. Ich habe kein benutzerdefiniertes CSS verwendet.

Answer 1

Verwenden layout-align und stellen Sie die Werte flex - CodePen

Markup

<md-card-content> 
    <div layout="row" layout-align="start center"> 
     <md-input-container layout="row" flex="30"> 
      <label><span class="fa fa-search"> </span>Search by ID</label> 
      <input ng-model="idSearch.input"> 
     </md-input-container> 
     <md-datepicker flex="40" ng-model="idSearch.date" md-placeholder="choose date"></md-datepicker> 
     <div flex="30">Number of search results</div> 
    </div> 
</md-card-content> 

https://material.angularjs.org/latest/layout/alignment

Verwenden Sie die folgenden für verschiedene Bildschirmgrößen:

https://material.angularjs.org/latest/layout/container https://material.angularjs.org/latest/layout/children