Angularjs 我的副标题有3个按钮

我需要在我的子标题中添加3个按钮，如果我这样做

<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>

城市
工厂
地位
{{items.id}
{{items.date}
{{items.status}
{{items.QCstatus}
{{items.Factory}

我需要这个布局整齐，间距相等。我的卡占用更多空间，我需要

填充顶部：0px和
填充botton:0px
有人能帮我吗

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;
}

更新

使用此选项删除“#001”和“成功进行流程”之间的空格，以及“成功进行流程”和“ARUN冰淇淋”之间的空格

.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>


城市
工厂
地位
在我的主要内容中，我有很多空间，是否可以删除它，即“#001”和“成功进行处理”之间的空间，以及“成功进行处理”和“ARUN冰淇淋”之间的空间。我仍然得到相同的问题。两行之间的空间应该缩小创建自定义类并在项目行中添加.cust#u item{padding:10px！important}。试试这个。不，它不起作用。卡中的文本移向左角