将Angular Material Dropdown菜单移到左侧

I am using Angular Material. I have successfully created a navigation bar and a dropdown menu.

我正在使用Angular Material。我已成功创建导航栏和下拉菜单。

It looks like this:

它看起来像这样:

I would like to move the DROPDOWN to the left-hand side. Now, it appears around the centre.

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

HTML code:

<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 width="2">
            <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>

How can the code be modified to move DROPDOWN to the left just beside the text Material NavBar?

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

1 个解决方案

#1

You just need to add <span flex> </span> in your code.

您只需在代码中添加即可。

<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 width="2">
        <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>

Here is a working Example. http://codepen.io/next1/pen/RaYNxw

这是一个有效的例子。 http://codepen.io/next1/pen/RaYNxw

#1