Question

我有Angular材质导航栏（如下所示）。我在导航栏中放了一个md菜单，因为我想实现右侧有下拉菜单的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>

提前感谢您的帮助！：）

Answer 1

尝试使用此flex中的codepen example demo范围。 <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>

角度材料对齐菜单右侧

1 个答案: