角度材料元素不对齐

Question

尝试布局时，md-input元素没有对齐。有人能告诉我出了什么问题。

＆＃13;

＆＃13;

angular.module('app', ['ngMaterial']).
controller('ctrl', function() {

});

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">

<div ng-app="app" ng-controller="ctrl">
  <div layout="row" layout-align="center center" flex id="containerCustomerDetails">
    <md-card flex>
      <md-card-content layout="row" layout-align="space-between center" >
        <div flex layout="row" layout-align="space-around center">
          <md-input-container class="md-block" flex="35">
            <label>Delivery</label>
            <md-select ng-model="delivery">
              <md-option ng-repeat="mode in delivery" value="{{mode.mode}}">
                {{mode.mode}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="md-block" flex="35">
            <label>Phone number</label>
            <input ng-model="phone" type="text" placeholder="Phone Number">
          </md-input-container>
        </div>
      </md-card-content>
      <md-card-actions layout="row" layout-align="center center">
        <md-button class="md-raised">Login</md-button>
      </md-card-actions>
    </md-card>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

两个md-input-container的高度不同，因此它们不会按照您想要的方式自动对齐（您可以通过检查控制台中的元素来查看）。对于您当前的设置，我建议添加一些CSS：

#delivery {
    margin-top: -7px;
}

＆＃13;

＆＃13;

angular.module('app', ['ngMaterial']).
controller('ctrl', function() {

});

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">

<style>
#delivery {
    margin-top: -7px;
}
</style>

<div ng-app="app" ng-controller="ctrl">
  <div layout="row" layout-align="center center" flex id="containerCustomerDetails">
    <md-card flex>
      <md-card-content layout="row" layout-align="space-between center" >
        <div flex layout="row" layout-align="space-around center">
          <md-input-container class="md-block" flex="35" id="delivery">
            <label>Delivery</label>
            <md-select ng-model="delivery">
              <md-option ng-repeat="mode in delivery" value="{{mode.mode}}">
                {{mode.mode}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="md-block" flex="35">
            <label>Phone number</label>
            <input ng-model="phone" type="text" placeholder="Phone Number">
          </md-input-container>
        </div>
      </md-card-content>
      <md-card-actions layout="row" layout-align="center center">
        <md-button class="md-raised">Login</md-button>
      </md-card-actions>
    </md-card>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需删除center上的div布局对齐即可。无需添加自定义CSS。

<div flex layout="row" layout-align="space-around">

＆＃13;

＆＃13;

angular.module('app', ['ngMaterial']).
controller('ctrl', function() {

});

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">

<div ng-app="app" ng-controller="ctrl">
  <div layout="row" layout-align="center center" flex id="containerCustomerDetails">
    <md-card flex>
      <md-card-content layout="row" layout-align="space-between center" >
        <div flex layout="row" layout-align="space-around">
          <md-input-container class="md-block" flex="35">
            <label>Delivery</label>
            <md-select ng-model="delivery">
              <md-option ng-repeat="mode in delivery" value="{{mode.mode}}">
                {{mode.mode}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="md-block" flex="35">
            <label>Phone number</label>
            <input ng-model="phone" type="text" placeholder="Phone Number">
          </md-input-container>
        </div>
      </md-card-content>
      <md-card-actions layout="row" layout-align="center center">
        <md-button class="md-raised">Login</md-button>
      </md-card-actions>
    </md-card>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;