离子4-如何降低离子清单项目的高度

Question

我的侧面菜单的标题中有一个离子列表，但我无法缩小项目的间距。您可以在图片中看到我要减少的位置：

列表代码为：

<ion-list class="sidemenu-header-list" inset=true lines="none">
  <ion-item color="secondary">
    <h2>{{name}}</h2>
  </ion-item>

  <ion-item color="secondary" class="ion-no-padding" *ngIf="school">
    <ion-label style="font-size: 14px" text-wrap innerHTML={{school}}></ion-label>
    <ion-icon size="small" name="school" slot="start"></ion-icon>
  </ion-item>
  <ion-item color="secondary" class="ion-no-padding"*ngIf="year">
    <ion-label style="font-size: 14px" >{{year | translate}}</ion-label>
    <ion-icon size="small" name="calendar" slot="start"></ion-icon>
  </ion-item>

</ion-list>

我可以看到在input-wrapper上设置的大小为48px；这是迫使我的物品高度升高的原因；但看不到我可以在哪里修改。

Answer 1

在CSS

ion-item {
    --min-height: 16px;
}

h2 {
   padding: 0px;
   margin : 0px;
 }
 

以HTML格式

<ion-item class="ion-no-padding"> // Ionic 4 or 5

Answer 2

尝试将以下行放入组件scss文件中，以修改ion-item组件的最小高度CSS变量

ion-item {
    --min-height: 16px;
}