Angular Material对齐菜单到右侧

Question

我有一个 Angular Material 导航栏（如下所示）。我在导航栏中放置了一个 md-menu，因为我想实现 bootstrap 导航栏右侧的下拉菜单。我该如何移动“WELCOME！IVAN”，它是右侧的下拉菜单。

以下是我的代码：

<div ng-controller="navController">
<md-content>
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">

        <md-nav-item md-nav-href="#{{ link.url}}"  ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
            <i class="fa {{ link.icon}}" aria-hidden="true"></i>
            &nbsp;&nbsp;{{ link.link}}
        </md-nav-item>

        <md-menu md-offset="0 -7" layout-align="end center">
            <md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
                Welcome! {{ user}}
                <!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
                <i class="fa fa-user" aria-hidden="true"></i>
            </md-button>
            <md-menu-content width="3">
                <md-menu-item>
                    <md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>

    </md-nav-bar>

</md-content>

提前感谢您的帮助!!! :)

- aiipee

Answer 1

尝试使用类似这个 flex 的跨度，就像这个CodePen示例演示中所示。 <span flex></span> 填充元素之间的空间。

<div ng-controller="navController">
    <md-content>
        <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
            <md-nav-item md-nav-href="#{{ link.url}}"  ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
                <i class="fa {{ link.icon}}" aria-hidden="true"></i>
                &nbsp;&nbsp;{{ link.link}}
            </md-nav-item>
            <span flex></span>
            <md-menu md-offset="0 -7" layout-align="end center">
                <md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
                    Welcome! {{ user}}
                    <!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
                    <i class="fa fa-user" aria-hidden="true"></i>
                </md-button>
                <md-menu-content width="3">
                    <md-menu-item>
                        <md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu>
        </md-nav-bar>
    </md-content>
</div>

- lin

---

哈哈哈哈。就是这么简单！浪费了我的时间，唉！不管怎样，非常感谢你的帮助！ :) - aiipee

很高兴能帮助你。 - lin