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>

希望这有助于和就是你想要达到的目的。