ボタンしかし、私はこのようなイオンのオプションボタンに2つのボタンを書いたことが

Question

垂直整列なりたい：

  <ion-option-button> 
       <button class="button button-icon ion-ios-telephone-outline"></button> 
       <button class="button button-icon ion-ios-trash-outline"></button> 
      </ion-option-button> 

をし、それは次のように示しています image 1

しかし、私は2つのボタンがこのように垂直に整列することができます： image 2

誰も私はそれをスタイルする方法を教えてもらえますか？ おかげで私はSCSSでこのように流れる追加たくさん...

スタイル：純粋なCSSの

  ion-option-button.button { 
       background-color: #000; 

       &.activated { 
        background-color: #000; 
       } 
       .button { 
        &:after { 
         content: ''; 
         top: initial; 
         left: initial; 
         right: initial; 
         bottom: initial; 
        } 
        &.button-icon { 
         color: $light; 
         font-size: 26px; 
        } 
       } 
      } 

Answer 1

ion-option-button { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-around; /* optional */ 
} 

Answer 2

ソリューション

#vertical-menu { 
 
    height: 180px; 
 
    width: 56px; 
 
} 
 

 
.button { 
 
    display: block; 
 
    width: 100%; 
 
    height: 50%; 
 
    border: 0; 
 
    background-color: #000; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: 18px; 
 
    cursor: pointer; 
 
    outline: none; 
 
} 
 

 
.ion-ios-telephone-outline { 
 
    background-image: url(http://mealthy.com.hk/images/icons/icon-phone.png); 
 
} 
 

 
.ion-ios-trash-outline { 
 
    background-image: url(http://www.iconsdb.com/icons/preview/white/trash-2-xxl.png); 
 
}

<div id="vertical-menu"> 
 
    <button class="button button-icon reset-this ion-ios-telephone-outline"></button> 
 
    <button class="button button-icon reset-this ion-ios-trash-outline"></button> 
 
</div>

Answer 3

これはでしたCSSのソリューションですか？

ion-option-button{ 
    display:flex; 
    flex-direction: column; 
    width:10px;/**You have to manipulate this value*/ 
} 
ion-option-button.button { 
       background-color: #000; 

       &.activated { 
        background-color: #000; 
       } 
       .button { 
        &:after { 
         content: ''; 
         top: initial; 
         left: initial; 
         right: initial; 
         bottom: initial; 
        } 
        &.button-icon { 
         color: $light; 
         font-size: 26px; 
        }