css - 将 Angular Material 下拉菜单移至左侧

Question

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

看起来像这样:

我想将 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 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>

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

Answer 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 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>

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