css - ionic 2 : make ion-list items smaller

Question

有个类似的问题here ，但它属于 ionic 1，其中 ion-item 仍然具有 ion-content。在 ionic-2 中没有 ionic-content。我已经尝试更改实际 ion-item 和类 item-inner 的高度/填充/边距，但似乎无法获得统一的“瘦- ing”的 ionic 元素。

问题:如何在 ionic 2 中使 ion-list 中的 ion-items 更细/更小/不那么高？附言。这是使用 ionic 2 beta 10

Answer 1

我发现这个问题的主要问题在于 ionic 原生的 app.ios.css 文件中，.item 类被分配给 ion-item元素获得分配给它的 min-height 4.4 rem。我不确定这个值是从哪里来的，也不知道为什么是 4.4。因此，在属于列表的 .scss 文件中，我刚刚添加:

.item {
    min-height: 3rem; /* <- this can be whatever you need */
}

这使得我对内部元素的边距所做的任何更改(我最终将边距分别更改为 0 8px 0 0 )实际上改变了列表项的高度，因为它们没有碰到最小高度设置。请参阅其他答案以了解更改边距的位置。

在不更改列表项的最小高度的情况下，对内部元素边距的任何更改都没有任何作用(至少对我而言)。