编辑：

Question

我正在使用Angular材质，并且我想将md-fab-speed-dial附加到li元素前面。

当我这样做时，我得到md-fab-speed-dial下面的li元素，如下图所示：

我该如何解决这个问题。

演示：https://codepen.io/anon/pen/VzpZLz

编辑：

这就是我希望它在demo中的样子：

这就是我希望它在我的应用程序中查看的方式：

Answer 1

问题是由使用flexbox的按钮和使用简单显示块的列表引起的。

如果您要使用以下代码将按钮添加到li中，则可以更改它：https://codepen.io/nickimola/pen/LjWPRy?editors=1000

li.align-button-inline{
display:flex;
align-items: center
}

然后像这样更改html：

<ul>
        <li class="adding-inline-button">Element 1 

        <md-fab-speed-dial md-open="false" md-direction="right" ng-class="md-fling">
                <md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn md-mini">
            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
          </md-button>
        </md-fab-trigger>

        <md-fab-actions>
          <md-button aria-label="twitter" class="md-fab md-raised">
            <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
          </md-button>
          <md-button aria-label="facebook" class="md-fab md-raised">
            <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
          </md-button>
          <md-button aria-label="Google hangout" class="md-fab md-raised">
            <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>
    </li>

这样做的缺点是，列表中元素的点消失了。我不知道这是否是一个问题（因为你可能想要摆脱它们）但是如果你想保留它们，你可以使用字体或：之前的伪元素轻松地在它之前添加一个点。 / p>

希望它有所帮助。

Answer 2

Here's the codepen

您已经在快速拨号元素上使用md-right类，它正在尝试使用flex来定位它。所以，你可以添加这些样式;

li {
    display: flex;
    align-items: center;
}

这样<li>使用flex，并在中心垂直对齐其子项。您将要将这些样式附加到类，而不是<li>元素本身。

在li元素前面追加一个元素

编辑：

2 个答案: