CSS 如何在 md-toolbar 中将元素定位到右侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32397604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position elements to the right in md-toolbar?
提问by Ka Tech
I am using FAB speed dial within a toolbar. However I am unable to have it floating to the right of the toolbar. I've tried float: rightwith no luck. Also, tried flex offset="55", but this doesn't work when the window is resized. Essentially, regardless of the window size, I would like the button sitting on the far right within the blue toolbar container.
我在工具栏中使用 FAB 快速拨号。但是我无法让它浮动到工具栏的右侧。我试过float: right没有运气。此外，尝试 flex offset="55"，但当窗口调整大小时这不起作用。本质上，无论窗口大小如何，我都希望按钮位于蓝色工具栏容器内的最右侧。
See photo and code below:
请参阅下面的照片和代码：
<md-toolbar layout-fill layout-padding layout="row" style="background-color: #3F51B5;color:white;text-align:text-center;">
<div layout="row">
<i class="fa fa-users fa-2x" flex></i>
<h1 class="md-title" style="color:white">Org Chart</h1>
</div>
<div class="lock-size" flex offset="55">
<md-fab-speed-dial md-direction="left" ng-class="md-fling">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-accent">
<md-tooltip>
Actions
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="view" class="md-fab md-raised md-mini" >
<md-tooltip>
View Chart
</md-tooltip>
<md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon>
</md-button>
<md-button aria-label="add" class="md-fab md-raised md-mini" >
<md-tooltip>
Add Chart
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon>
</md-button>
<md-button aria-label="Settings" class="md-fab md-raised md-mini" >
<md-tooltip>
Security Access
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon>
</md-button>
<md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')">
<md-tooltip>
Edit Chart
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-toolbar>
回答by Ivan Coronado
THIS SOLUTION IS FOR ANGULAR MATERIAL v1.X, IF YOU NEED AN UNIVERSAL/ANGULAR MATERIAL v2 SOLUTION CHECK @experimenter ANSWER
此解决方案适用于角度材料 v1.X，如果您需要通用/角度材料 v2 解决方案检查 @experimenter ANSWER
If you have a md-toolbarthe easiest way to align right content is like this:
如果你有一个md-toolbar最简单的方法来对齐正确的内容是这样的：
<md-toolbar>
<div class="md-toolbar-tools">
<h3>You text</h3>
<span flex></span>
<ANY>your right content</ANY>
</div>
</md-toolbar>
The flexproperty in spanwill cover the space between the contents. This is the official way in documentation.
该flex物业span将覆盖内容之间的空间。这是文档中的官方方式。
In you example, you just need:
在你的例子中，你只需要：
<md-toolbar>
<div class="md-toolbar-tools">
<div layout="row">
<i class="fa fa-users fa-2x" flex></i>
<h1 class="md-title" style="color:white">Org Chart</h1>
</div>
<span flex></span>
<md-fab-speed-dial md-direction="left" ng-class="md-fling">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-accent">
<md-tooltip>
Actions
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="view" class="md-fab md-raised md-mini">
<md-tooltip>
View Chart
</md-tooltip>
<md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon>
</md-button>
<md-button aria-label="add" class="md-fab md-raised md-mini">
<md-tooltip>
Add Chart
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon>
</md-button>
<md-button aria-label="Settings" class="md-fab md-raised md-mini">
<md-tooltip>
Security Access
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon>
</md-button>
<md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')">
<md-tooltip>
Edit Chart
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-toolbar>
回答by Experimenter
Or you can use a class for that:
或者您可以为此使用一个类：
.fill-space {
// This fills the remaining space, by using flexbox.
// Every toolbar row uses a flexbox row layout.
flex: 1 1 auto;
}<md-toolbar color="primary">
<span>Application Title</span>
<!-- This fills the remaining space of the current row -->
<span class="fill-space"></span>
<span>Right Aligned Text</span>
</md-toolbar>This solution is also taken from a spec.
该解决方案也取自规范。
