要素の前に要素を追加します

Question

私は角材を使用しており、li要素の前にmd-fab-speed-dialを追加します。

私は、この写真のように、私はli要素怒鳴るmd-fab-speed-dialを得ることを実行します。

どのように私はこの問題を解決することができます。

デモ：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> 

を

これを行うことの欠点は、リスト内の要素からのドットが消えることです。これが問題なのかどうかはわかりません（とにかくそれらを取り除きたくなるかもしれませんが）。もしそれらを保持したいのであれば、フォントまたは：before疑似要素を使ってドットを簡単に追加することができます。

どのような場合でも役立ちます。

Answer 2

Here's the codepen

あなたはすでにそれを配置するためにフレックスを使用しようとしているスピードダイヤル要素、上md-rightクラスを使用しています。したがって、これらのスタイルを追加するだけで済みます。

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

<li>はフレックス使用しており、縦方向中心にその子を揃えるようにするため。あなたはこれらのスタイルをクラスに結びつけたいと思っていますが、それ自体は<li>要素ではありません。