使用 md-input-container 和 md-datepicker 均匀分布答案

【问题标题】：Spacing evenly with md-input-container's and md-datepicker使用 md-input-container 和 md-datepicker 均匀分布
【发布时间】：2016-08-20 03:59:01
【问题描述】：

我已经尝试了各种类型的 flex、layout-wrap 以及我能想到的所有有角度的材料。

我不知道如何使这些输入均匀分布。

我认为问题是每个输入都在 md-input-container 内，我不能将 md-datepicker 放在一个内，因为它会为用户提供两行输入。

如果有人可以让我知道如何将它们均匀地隔开，那真是太棒了！

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

【问题讨论】：

您能创建一个 Plunker、Fiddle 或 CodePen 示例吗？
尝试在日期选择器周围放置一个 md-input-container。您需要使用最新的 HEAD。 github.com/angular/material/issues/4233
列布局还是行布局？

标签： angularjs angular-material

【解决方案1】：

我知道这已经快两个月了，但我想让你知道这应该在 Angular Material 1.1.0 中得到修复，它于 2016 年 8 月 14 日正式发布。

Datepicker didn't used to work well with md-input-container。感兴趣的也可以read the commit with the fix。

【讨论】：