角材料元素未对齐

Question

当我尝试布局时，md-input 元素没有对齐。谁能告诉我哪里出了问题。

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

});

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

Answer 1

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

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

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

});

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

Answer 2

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

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

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

});

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