AngularJS - 在md-menu-bar中对齐md-button

我是Angular的新手，我研究过这个，但我仍然无法解决这个问题。AngularJS - 在md-menu-bar中对齐md-button

我需要我的VTS Anketa按钮是正确的，而所有其他按钮左对齐。

下面是代码：

<md-toolbar layout="row" flex="1"> 
    <md-menu-bar> 
    <md-menu> 
     <md-button ng-href="/#/">Home</md-button> 
    </md-menu> 
    <md-menu> 
     <md-button ng-href="/#/create">Napravi anketu</md-button> 
    </md-menu> 
    <md-menu> 
     <md-button ng-href="/#/view">Pogledaj anketu</md-button> 
    </md-menu> 
    <md-menu> 
     <md-button layout-align="right" ng-href="/#/delete" ng-click="delete()"> Izbrisi anketu</md-button> 
    </md-menu> 
    <md-menu> 
     <md-button id="moveright" ng-href="/#/">VTŠ Anketa</md-button> 
    </md-menu> 
    </md-menu-bar> 
</md-toolbar>

我已经试过了MD-按钮和MD-菜单前加入跨度柔性，但随后的按钮即可自败：

<md-menu> 
    <span flex></span> 
    <md-button id="moveright" ng-href="/#/">VTŠ Anketa</md-button> 
</md-menu>

结果：

另外，我试过在标签中添加一个id，然后在css中调用该id并使用text-align：right;那也没有做任何事情。

来源

2017-04-21 IkePr

您是否尝试过css'float：right'？ – sn3ll

刚试过，什么都不做。 css已连接，'color：red;'有效，但移动它将不起作用:(。@ sn3ll – IkePr

我创建了一个不同的工具栏和使用的跨度布局是这样的：

<md-toolbar layout="column"> 

    <span layout="row" layout-padding> 
    <h2 class="md-toolbar-tools" style="font-family: Trebuchet MS;"> VTŠ Anketa</h2> 

    <md-button ng-href="/#/" id="movebottom">Glasaj</md-button> 
    <md-button ng-href="/#/create">Napravi</md-button> 
    <md-button ng-href="/#/view">Pogledaj</md-button> 
    <md-button ng-href="/#/delete" ng-click="delete()"> Izbriši</md-button> 
    </span> 
</md-toolbar>

来源

2017-04-21 21:38:20 IkePr

添加弯曲到MD-菜单栏，并添加浮动：正确的ID MoveRight的

<md-menu-bar flex> 
    <md-menu> 
     <md-button ng-href="/#/">Home</md-button> 
    </md-menu> 
    <md-menu> 
     <md-button ng-href="/#/create">Napravi anketu</md-button> 
    </md-menu> 
    <md-menu> 
     <md-button ng-href="/#/view">Pogledaj anketu</md-button> 
    </md-menu> 
    <md-menu> 
     <md-button ng-href="/#/delete" ng-click="delete()"> Izbrisi anketu</md-button> 
    </md-menu> 
    <md-menu > 
     <md-button id="moveright" ng-href="/#/">VTŠ Anketa</md-button> 
    </md-menu> 
    </md-menu-bar>

CSS ：

#moveright { 
    float: right; 
}

这是因为md-menu-bar在工具栏中有最大宽度，所以你必须一直弯曲它作为工具栏' s的宽度，这样你就可以移动项目。

查看codepen：https://codepen.io/anon/pen/WjxwNZ

来源

2017-04-21 21:56:47

AngularJS - 在md-menu-bar中对齐md-button

回答

相关问题