2016-08-11 143 views
0

这是我的代码:角MD按钮右对齐

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

您也可以从这里看到: http://plnkr.co/edit/xZiHtOgXN871xu3X2inO?p=preview

输入容器和按钮必须在同一行。部分不是强制性的。

按钮必须在右边。

我试过div里面的div,但没有工作或div内部分。

+0

请问您能否在您的问题中更具体一些?我担心我不完全明白你想达到的目标。如果你想在同一行上使用按钮和容器,你可以看看display:inline-block css属性。 –

回答

0

只要你的代码改成这样:

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

这将把这一切放在同一行。如果这不是你想要的,请告诉我。

0

您只需要将layout-alignlayout-align="end none"更改为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>