角度md按钮右对齐

Question

This is my code:

<section layout="row">
    <div layout="row">
      <md-input-container>
        <label translate>enter merchant type</label>
        <input type="text" ng-readonly="true" ng-model="vm.sector.merchantType">
      </md-input-container>
    </div>
    <div layout="row" layout-align="end none">
      <md-button class="md-primary" ng-click="vm.openSectorDetail(vm.sector.id)">
        <label translate>merchant call </label>
        <md-icon>link</md-icon>
      </md-button>
    </div>

  </section>

You can also see from here: http://plnkr.co/edit/xZiHtOgXN871xu3X2inO?p=preview

input-container and button must be in same row. Section is not mandatory.

Button must be in the right.

I tried divs inside div but did not work or divs inside section.

Answer 1

Just change your code to this:

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
   <span layout="row" layout-align="start center" flex>
   <md-button class="md-primary">Submit</md-button>
   <span flex></span>

  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

That will put it all on the same line. If this is not what you are looking for, let me know.

Answer 2

All you need to do is change your layout-align from layout-align="end none" to layout-align="end end" .

<div flex="100" flex-gt-md="100">
    <div class="padding-0">
        <div layout="row" layout-align="end end">
            <md-button
                  class="md-raised md-primary margin-left-20"
                  ng-click="vm.workspacesClick()"
                  translate="CONTENT_MANAGEMENT.BUTTON_BACK_TO_WORKSPACES"
                  aria-label="{{'CONTENT_MANAGEMENT.BUTTON_BACK_TO_WORKSPACES' | translate}}">
            </md-button>
        </div>
    </div>
</div>