material 设计 md-icon & md-select 对齐方式

Question

是否可以在 md-select 标签之前对齐图标？我在 angular-material codepen 中尝试过，但是只要我在 md-select 标签前面添加一个图标，对齐就会中断

我尝试了不同的做法，但结果相同：

<div>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <md-button class="md-icon-button" aria-label="Settings">
        <md-icon md-font-icon="fa-bars" class="fa"></md-icon>
      </md-button>
      <h2>
        <span>Toolbar with Icon Buttons</span>
      </h2>
      <span flex></span>
      <md-button class="md-icon-button" aria-label="Favorite">
        <md-icon md-font-icon="fa-gear" class="fa" style="color: greenyellow;"></md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="More">
        <md-icon md-font-icon="fa-vimeo" class="fa"></md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <div class="backgroundbar"></div>

  <div layout-padding layout="row" layout-align="center center" class="content">

    <md-whiteframe class="md-whiteframe-z2" flex-gt-md="80" flex-gt-sm="90" flex-sm="100">

      <md-content layout-padding>

        <div layout>
          <md-input-container md-no-float flex>
            <md-icon md-font-icon="fa-clock-o" class="fa history-btn" ng-click=""></md-icon>
            <input ng-model="user.phone" type="text" placeholder="Phone Number" disabled>
          </md-input-container>

          <md-select placeholder="State" ng-model="ctrl.userState" flex="20">
            <md-option ng-repeat="state in vm.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
          </md-select>

        </div>

        <md-input-container md-no-float>
          <md-icon md-font-icon="fa-clock-o" class="fa history-btn" ng-click=""></md-icon>
          <input ng-model="user.phone" type="text" placeholder="Phone Number" disabled>
        </md-input-container>

        <md-input-container md-no-float>
          <md-icon md-font-icon="fa-clock-o" class="fa history-btn" ng-click=""></md-icon>
          <input ng-model="user.phone" type="text" placeholder="Phone Number" disabled>
        </md-input-container>

      </md-content>

    </md-whiteframe>

  </div>

</div>

Answer 1

我已经在您的代码笔中进行了您需要的更改，请检查一下。我在 select 框后添加了 span 并删除了 md-no-float 并添加了一个新的 div 以及 layout="row 和 flex。

<md-input-container>
  <div layout="row" flex>
    <md-icon md-svg-src="img/icons/ic_phone_24px.svg" flex></md-icon>
    <md-select placeholder="State" ng-model="ctrl.userState" flex="20">
      <md-option ng-repeat="state in vm.states" value="{{state.abbrev}}">
        {{state.abbrev}}
      </md-option>
    </md-select>
    <span flex="75"></span>
  </div>
</md-input-container>

这是更新后的代码。

material 设计 md-icon & md-select 对齐方式

material design md-icon & md-select aligment

angularjs

angular-material