CSS高級三按鈕行格式化

Question

我想在Ionic 2框架中設計一排按鈕，並且遇到了一些麻煩。

這是我目前擁有的按鈕看起來像：

我想什麼他們看起來象是沿着以下圖像的行更多的東西：

我希望最終的結果是在中間有一個更大的圓形按鈕，每個邊上的兩個按鈕都有一個與中心曲率一致的邊框按鈕。

我是新來的造型，並不真正知道從哪裏開始，所以任何指針在正確的方向將不勝感激。

這是迄今爲止我添加到我的按鈕的CSS。

.button-row-icons { 
 
    font-size: 2.5em; 
 
} 
 

 
.left-right-buttons { 
 
    background: none; 
 
    color: #AD001A; 
 
    border: 2px solid #AD001A; 
 
    margin: 0px !important; 
 
} 
 

 
.left-right-buttons:active { 
 
    background: #eee; 
 
} 
 

 
#select-button { 
 
    border-radius: 40%; 
 
    margin: 0px !important; 
 
} 
 

 
#left-button { 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
} 
 

 
#right-button { 
 
    border-top-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
}

    <ion-row class="button-row"> 
 
         <ion-col col-5 class="button-col"> 
 
          <button class="left-right-buttons" id="left-button" ion-button no-shadow (click)="swipeCard(false)"> 
 
           <ion-icon class="button-row-icons" name="arrow-dropleft"></ion-icon> 
 
          </button> 
 
         </ion-col> 
 
         <ion-col col-2 class="button-col"> 
 
          <button id="select-button" ion-button no-shadow (click)="selectCard(restaurant)"> 
 
           <ion-icon class="button-row-icons" name="checkmark-circle-outline"></ion-icon> 
 
          </button> 
 
         </ion-col> 
 
         <ion-col col-5 class="button-col"> 
 
          <button class="left-right-buttons" id="right-button" ion-button no-shadow (click)="swipeCard(true)"> 
 
           <ion-icon class="button-row-icons" name="arrow-dropright"></ion-icon> 
 
          </button> 
 
         </ion-col> 
 
        </ion-row>

Answer 1

使用CSS Flexbox的，margin和z-index安排元素。看看下面的代碼片段：

.button-row-icons { 
 
    font-size: 2.5em; 
 
    display: flex; 
 
} 
 

 
.left-right-buttons { 
 
    background: none; 
 
    color: #AD001A; 
 
    padding: 0 20px; 
 
    border: 2px solid #AD001A; 
 
    margin: 0px !important; 
 
    line-height: 1; 
 
    height: 40px; 
 
    z-index: 5; 
 
    position: relative; 
 
} 
 

 
.left-right-buttons:active { 
 
    background: #eee; 
 
} 
 

 
#select-button { 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 0px !important; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 

 
#left-button { 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    margin: 5px -20px 0 0 !important; 
 
} 
 

 
#right-button { 
 
    border-top-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    margin: 5px 0 0 -20px !important; 
 
}

<ion-row class="button-row"> 
 
    <ion-col col-5 class="button-col"> 
 
     <button class="left-right-buttons" id="left-button" ion-button no-shadow (click)="swipeCard(false)"> 
 
      <ion-icon class="button-row-icons" name="arrow-dropleft"></ion-icon> L 
 
     </button> 
 
    </ion-col> 
 
    <ion-col col-2 class="button-col"> 
 
     <button id="select-button" ion-button no-shadow (click)="selectCard(restaurant)"> 
 
      <ion-icon class="button-row-icons" name="checkmark-circle-outline"></ion-icon> M 
 
     </button> 
 
    </ion-col> 
 
    <ion-col col-5 class="button-col"> 
 
     <button class="left-right-buttons" id="right-button" ion-button no-shadow (click)="swipeCard(true)"> 
 
      <ion-icon class="button-row-icons" name="arrow-dropright"></ion-icon> R 
 
     </button> 
 
    </ion-col> 
 
</ion-row>

希望這有助於和就是你想要達到的目的。