Question

我已经尝试设置padding and margin to 0px，但高度没有降低。

ion-segment-button {
  --padding-bottom: 0px;
  --padding-top: 0px;
  --margin-bottom: 0px;
  --margin-top: 0px;
}

我无法在documentation中找到无法调整的任何属性。

Answer 1

您可以这样设置高度。

ion-segment-button{
    min-height: 10px;
}

Answer 2

这对我来说很好：（您必须定义一个离子段按钮的高度）

  <ion-segment [(ngModel)]="relationship" color="primary" >
    <ion-segment-button value="friends" style="height: 30px; font-size: 8px">
      Friends
    </ion-segment-button>
    <ion-segment-button value="enemies" style="height: 30px; font-size: 8px">
      Enemies
    </ion-segment-button>
  </ion-segment>

Answer 3

我在CSS中确实如此

ion-segment{
  height:30px;
}

ion-segment-button{
   min-height:30px;
}

Answer 4

需要减小高度和最小高度。应该可以。

ion-segment-button {
  height: 30px;
  min-height: 30px;
}

Answer 5

<ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" value="0">
    <ion-segment-button value="0">                                             
        Active                                                                 
    </ion-segment-button>                                                      
    <ion-segment-button value="1">                                             
        Expire                                                                 
    </ion-segment-button>                                                      
</ion-segment>

CSS：

ion-segment-button {
    min-height: 32px;
}

这对我有用，还请检查它是否处于一定高度，以便我们进行相应的管理。

如何降低离子段按钮的高度？

5 个答案: