将 Angular Material 下拉菜单移至左侧

Posted 2023-03-06

【中文标题】将 Angular Material 下拉菜单移至左侧

【英文标题】：Move Angular Material Dropdown menu to the left

【发布时间】：2016-08-18 09:58:24

【问题描述】：

我正在使用 Angular 材质。我已经成功创建了一个导航栏和一个下拉菜单。

看起来像这样：

我想将DROPDOWN 移到左侧。现在，它出现在中心周围。

HTML 代码：

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;">
    <h2>Material NavBar</h2>
    <md-menu>
        <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button>
        <md-menu-content >
            <md-menu-item>
                <md-button>Help</md-button>
            </md-menu-item>
            <md-menu-item>
                <md-button>About</md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
    <md-button aria-label="Go Back">
        Go Back
    </md-button>
    <md-button>Item 1</md-button>
    <md-button>Item 2</md-button>
</md-toolbar>

如何修改代码以将DROPDOWN 移动到文本Material NavBar 旁边的左侧？

【参考方案1】：

您只需在代码中添加<span flex> </span>。

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px">
<h2>Material NavBar</h2>
<md-menu>
    <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button>
    <md-menu-content >
        <md-menu-item>
            <md-button>Help</md-button>
        </md-menu-item>
        <md-menu-item>
            <md-button>About</md-button>
        </md-menu-item>
    </md-menu-content>
</md-menu>
<span flex></span>
<md-button aria-label="Go Back">
    Go Back
</md-button>
<md-button>Item 1</md-button>
<md-button>Item 2</md-button>

这是一个工作示例。 http://codepen.io/next1/pen/RaYNxw

【讨论】：

方向错误，应该在 left... ;) 所以在菜单之后添加那个 flex

我的错。再次检查。

这样一个简单的解决方案，但我被卡住了很长一段时间。天才！

始终使用 span 元素来适当对齐元素。

flex 是重要的概念。查看官方文档material.angularjs.org/latest/layout/children