md-input-containerとmd-datepickerで均等に間隔を置いて

Question

私はすべての種類のすべてのフレックス、レイアウトラップ、私が考えることができるすべての角度の材料を試しました。

これらの入力を均等に配置する方法を理解できません。

すべての入力がmd-input-containerの内部にあり、md-datepickerを1つの内部に入れることができないという問題は だと思います。

誰かが私にこれらを均等に配置する方法を教えてもらえれば、本当にすばらしいでしょう！

<form name="formData" action="http://localhost:3000/senddata" method="POST"> 
<md-input-container class="md-block" > 
    <label><i class="material-icons">face</i>&nbsp;&nbsp; Name</label> 
    <input type="text" name="name" ng-model="$ctrl.name"/> 
</md-input-container> 
<md-input-container class="md-block"> 
    <label><i class="material-icons">explore</i>&nbsp; &nbsp; Zip Code</label> 
    <input required type="text" name="zipCode" ng-model="$ctrl.zipCode" ng-minlength="5" pattern="^\d{5}(?:[-\s]\d{4})?$"/> 
    <div ng-messages="formData.zipCode.$error" style="color:red;" role="alert"> 
     <div ng-message="required">This field is required!</div> 
     <div ng-message="minlength">Minimum length is 5</div> 
    </div> 
</md-input-container> 
    <md-datepicker ng-model="$ctrl.myDate" class="md-block md-datepicker-focused" md-placeholder="Enter date" required md-max-date="$ctrl.maxDate"></md-datepicker> 
<md-input-container class="md-block"> 
    <label><i class="material-icons">search</i>&nbsp; &nbsp;Search:</label> 
    <input type="text" name="search" ng-model="$ctrl.search" required/> 
    <div ng-messages="formData.search.$error" style="color:red" role="alert"> 
     <div ng-message="required">This field is required!</div> 
    </div> 
</md-input-container> 
<md-button class="md-raised md-primary" ng-disabled="formData.$invalid" ng-click="$ctrl.getData()" style="float:right;">Submit 
</md-button> 

Answer 1

私は、これはほぼ2ヶ月である知っていますが、これは正式に2016年8月14日に発売された角度素材1.1.0で修正されなければならないことを知ってもらいたいです。

Datepicker didn't used to work well with md-input-container。好奇心が強い場合は、read the commit with the fixでもかまいません。