Question

我需要在我的子标题中添加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>

我需要这个布局整洁且等间距。我的卡占用了更多空间我需要padding-top: 0px;和padding-botton:0px; 有人可以帮我吗

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

<强>更新

删除＆＃39;＃001＆＃39;之间的空格并且＆＃39;在流程上取得成功，以及在流程成功之间的空间＆＃39;和＆＃39; ARUN ICE CREAM＆＃39;用这个。

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

我的副标题有3个按钮

1 个答案: