css - 删除离子列表中的间距

Question

我尝试删除项目之间的间距。如您所见，列表垂直占用了一个空间，我需要将文本靠得更近，但我想保留线条。

我尝试了很多不同的 css 东西（将边距/填充设置为 0 并减少最大高度），但它总是切断线条和文本，而不是仅仅删除它们之间的空格。

     <ion-card>
            <ion-card-header>
                <ion-card-subtitle>
                Tichumaster
                </ion-card-subtitle>
                <ion-card-title>
                    <ion-icon class="iconSize" name="aperture"></ion-icon>
                </ion-card-title>
                <ion-card-content>
                    <ion-list>
                        <ion-item>
                                <ion-label>Du</ion-label>
                                <ion-note slot="end" color="tertiary">10%</ion-note>
                        </ion-item>
                        <ion-item>
                            <ion-label>Du</ion-label>
                            <ion-note slot="end" color="tertiary">10%</ion-note>
                        </ion-item>
                        <ion-item>
                            <ion-label>Du</ion-label>
                            <ion-note slot="end" color="tertiary">10%</ion-note>
                        </ion-item>
                        <ion-item>
                            <ion-label>Du</ion-label>
                            <ion-note slot="end" color="tertiary">10%</ion-note>
                        </ion-item>
                    </ion-list>
                </ion-card-content>
            </ion-card-header>
        </ion-card>

Answer 1

我也很难做到这一点。但我设法做到了

ion-item.myList{
  margin-top: -11px; 
}

但是为了不干扰我使用的所有离子项目，我使用了一个类

<ion-item class="myList">