在li元素前添加一个元素

Question

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

当我这样做，我得到了md-fab-speed-dial波纹管的li元素显示在此图片：

我怎样才能解决这个问题。

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

编辑：

这是我希望它看起来在演示：

而且这是我希望它在我的应用程序看起来：

Answer 1

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

你可以改变它，如果你添加一个类你想要的按钮与下面的代码是内联黎：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> 

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

希望它以任何方式帮助。

Answer 2

Here's the codepen

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

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

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