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

Question

我正在使用 Angular 材料，我想在 li 元素前面附加 md-fab-speed-dial。

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

我该如何解决这个问题。

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

编辑：

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

这就是我希望它在我的应用程序中的外观：

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>

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

希望对您有所帮助。

Answer 2

Here's the codepen

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

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

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