材料设计md-icon＆amp; md-select aligment

Question

是否可以在md-select代码前对齐图标？我已尝试使用角度材料编写代码，但只要在md-select标记的前面添加一个图标，该对象就会分解

codepen

我试着采用不同的方式，但结果相同：

<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

我已经在您的codepen中进行了所需的更改，请查看它。我在选择框后面添加了span，并删除了md-no-float并添加了一个包含layout="row和flex的新div。

<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>
</md-input-container>

这是更新的代码。