Angular Material FAB Speed Dial 在工具栏中有偏移答案

【问题标题】：Angular Material FAB Speed Dial has offset in ToolbarAngular Material FAB Speed Dial 在工具栏中有偏移
【发布时间】：2016-03-01 09:53:28
【问题描述】：

我尝试从 angular material site 中获取一些设计示例。我使用 Angular Material 1.0.0RC5。

我想将 FAB Speedial 放在工具栏中，就像他们的示例一样 https://material.angularjs.org/latest/demo/fabSpeedDial

但是当我应用我在页面上看到的代码时，我也得到了一个奇怪的偏移量，我只能用 margin-top:-23px 纠正它，但我认为我做错了什么。

如果超过某个大小，我还可以看到来自站点的codepen example 中的偏移量具有相同的错误

那我做错了什么？

下面我附上屏幕的代码

<body ng-app="starterApp" layout="column" ng-controller="AppController as ac" ng-cloak>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>
                <span>Toolbar with Icon Buttons</span>
            </h2>
            <span flex></span>
        </div>
    </md-toolbar>
    <md-fab-speed-dial md-open="isOpen" md-direction="down" class="md-scale md-fab-top-right">
        <md-fab-trigger>
            <md-button aria-label="menu" class="md-fab md-warn">
                <md-icon md-svg-src="menu"></md-icon>
            </md-button>
        </md-fab-trigger>
        <md-fab-actions>
            <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
                <md-icon md-svg-src="android" aria-label="Twitter"></md-icon>
            </md-button>
            <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
                <md-icon md-svg-src="windows" aria-label="Facebook"></md-icon>
            </md-button>
        </md-fab-actions>
    </md-fab-speed-dial>
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-4dp" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <md-button class="md-accent">Button 1</md-button>
            <md-button class="md-accent">Button 2</md-button>
        </md-sidenav>
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.
                <p>This is the content area! </p>
            </md-content>
        </div>
    </div>

【问题讨论】：

标签： html css angularjs material-design angular-material

【解决方案1】：

Take a look at this pen

我所做的只是将 margin-top 属性从 89 更改为 16，如果我明白你的意思，现在一切正常

【讨论】：

所以这是预期的行为？我认为这是一个“错误”；）

【解决方案2】：

他们的有效而你的无效的原因是因为他们的菜单栏上方有另一个元素，所以他们添加了“margin-top：89px;”和“顶部：16px；”补偿。

您需要做的就是调整他们设置的 margin-top 值。

.fabSpeedDialdemoMoreOptions md-fab-speed-dial {
  margin-top: 65px;
}

See here

【讨论】：