mon subheader d'avoir 3 bouton

Question

Je dois ajouter 3 bouton à mon subheader si faire je reçois comme ça,

<div class="bar bar-subheader"> 
    <div class=" button-bar"> 
     <button class="button button-positive" style="padding-right:25%;"> 
      City <i class="icon ion-chevron-down"></i> 
     </button> 
     <button class="button button-positive" style="padding-right:30%;"> 
      Factory <i class="icon ion-chevron-down"></i> 
     </button> 
     <button class="button button-positive" style="padding-right:30%;"> 
      Status <i class="icon ion-chevron-down"></i> 
     </button> 
    </div> 
</div> 
<ion-content> 
    <div class="item"></div> 
    <div class='card' ng-repeat="items in items"> 
     <div class="list "> 
      <div class='item' style="padding-top:0px;"> {{items.id}} 
       <l class="item-icon-right" style="padding-left:30%"> {{items.date}} </l> 
      </div> 
      <div class='item' style="padding-top:0px;">{{items.status}} 
       <l class="item-icon-right" style="text-align:right;">{{items.QCstatus}}</l> 
       <i class="icon ion-chevron-right"></i> 
      </div> 
      <b class='item '> {{items.Factory}} </b> 
     </div> 
    </div> 
</ion-content> 

je besoin de cette mise en page pour être propre et un espacement égal. Ma carte occupe plus d'espace que j'ai besoin padding-top: 0px; et padding-botton:0px; Quelqu'un pourrait-il me aider

Answer 1

CSS

.segmented { 
    display: block; 
    margin: 0px 10px; 
} 
.segmented .label { 
    background-color: #387ef5; 
    border: 1px #387ef5; 
    border-style: solid none solid solid; 
    color: #ffffff; 
    cursor: pointer; 
    float: left; 
    padding: 8px; 
    text-align: center; 
    width: 33%; 
} 
.segmented :first-child .label { 
    border-radius: 3px 0 0 3px; 
} 

.segmented :last-child .label { 
    border-radius: 0 3px 3px 0; 
    border-right-style: solid; 
} 

.segmented input { 
    display: none; 
} 

.segmented input:checked + .label { 
    background-color: #ffffff; 
    border-color: #ffffff; 
    color: #387ef5; 
} 
.segment-bar { 
    margin: 55px 0 30px; 
    text-align: center; 
} 

.segmented .label { 
    -webkit-box-shadow: 0px 0px 5px 0px #3855f5; 
    -moz-box-shadow: 0px 0px 5px 0px #3855f5; 
    box-shadow: 0px 0px 5px 0px #3855f5; 
} 

.segmented input:checked + span { 
    background: #ffffff; 
} 
.segmented label:nth-child(1) .label { 
    width: 28%; 
} 

.segmented label:nth-child(2) .label { 
    width: 40%; 
    padding-right: 20px; 
} 

.segmented label:nth-child(3) .label { 
    width: 32%; 
    padding-right: 20px; 
} 
.main-content { 
    margin-top: 60px; 
} 

MISE À JOUR

Supprimer l'espace entre '# 001' et ' succès sur le processus », et l'espace entre« succès sur le processus »et« AR UN ICE CREAM 'en utilisant ceci.

.item { 
    padding: 10px; 
} 

HTML

<ion-view view-title="Home"> 
    <div class="segment-bar"> 
     <span class="segmented"> 
      <label> 
       <input type="radio" name="segment" > 
       <span class="label">CITY <i class="icon ion-chevron-down"></i></span> 
      </label> 
      <label> 
       <input type="radio" name="segment"> 
       <span class="label">FACTORY <i class="icon ion-chevron-down"></i></span> 
      </label> 
      <label> 
       <input type="radio" name="segment"> 
       <span class="label">STATUS <i class="icon ion-chevron-down"></i></span> 
      </label> 
     </span> 
    </div> 
    </div> 
    <ion-content class="padding main-content"> 

    </ion-content> 
</ion-view>