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

Question

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

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

我该如何解决。

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

编辑:

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

这就是我希望它在我的应用程序中的样子:

Answer 1

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

如果您向 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 伪元素轻松地在它之前添加一个点。

希望对您有所帮助。