将ng-href添加到按钮时，为什么md-menu与md-button不对齐？

Question

Demo here: http://codepen.io/audiodude/pen/vLyNvw

The only difference between the top and the bottom is that the top uses an md-button with an ng-href attribute, which gets compiled by Angular Material to an a tag, while the bottom uses a plain md-button that gets compiled to a button tag. However, the .md-button class does seem to add all of the same styling to the anchor version of the button.

So why does the menu in the top example get seemingly pushed to a new line?

Answer 1

<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">
  <md-content layout="column" layout-align="start center">
    <div layout="row" layout-align="center" layout-fill>
      <md-card flex-sm="95" flex-gt-md="70" layout="column">
        <div layout-sm="column" layout-gt-sm="row" flex>
          <div flex layout>
            <md-button ng-href="https://www.google.com" class="md-primary">
              <md-icon aria-label="launch">launch</md-icon> Link
            </md-button>
            <md-menu>
              <md-button aria-label="Open edit menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                <md-icon md-menu-origin>arrow_drop_down</md-icon>
              </md-button>
              <md-menu-content width="5">
                <md-button>Menu Choice</md-button>
              </md-menu-content>
            </md-menu>
          </div>
          <span flex></span>
        </div>
      </md-card>
    </div>
  </md-content>

  <md-content layout="column" layout-align="start center">
    <div layout="row" layout-align="center" layout-fill>
      <md-card flex-sm="95" flex-gt-md="70" layout="column">
        <div layout-sm="column" layout-gt-sm="row" flex>
          <div flex>
            <md-button class="md-primary">
              <md-icon aria-label="launch">launch</md-icon> Link
            </md-button>
            <md-menu>
              <md-button aria-label="Open edit menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                <md-icon md-menu-origin>arrow_drop_down</md-icon>
              </md-button>
              <md-menu-content width="5">
                <md-button>Menu Choice</md-button>
              </md-menu-content>
            </md-menu>
          </div>
          <span flex></span>
        </div>
      </md-card>
    </div>
  </md-content>
</div>

You just forgot to add "layout" attribute (by default it's row) in line 6.