ionic2离子列表太多填充

Question

我的离子列表的右边有太多的填充物。

​

​

我可以减少左边的填充

padding: 0 0 0 0 !important;

但却找不到任何方法去影响右边。

    <ion-list class="wrapping-list">
    <ion-item *ngFor="let listItem of list; let i = index" no-padding row-no-padding (click)="seeListItem(i)" (long-press)="longPressListItem(i)" (swipe-left)="swipeLeftItem(i)">
        <ion-avatar item-left>
            <img width="30px" height="30px" src="{{listItem.thumbnail}}" />
        </ion-avatar>
        <h2>{{ listItem.name }} </h2>
        <p>{{ listItem.summary }} </p>
    </ion-item>
</ion-list>

下面是我尝试使用CSS的所有内容：

.wrapping-list .item-content, .wrapping-list .item {
overflow: initial;
white-space: initial;

padding: 0 0 0 0 !important;
}

.no-padding {
    padding: 0 0 0 0 !important;
}

.item-complex .item-content {
  padding: 0 0 0 0 !important;
}

.item-right
{
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
}

其他格式问题：

1. 我如何摆脱项目之间的界线？
2. 为什么这一行只在文字下面而不是图片下面？
3. 如何使第二行文本(灰色文本)两行与包装？

Answer 1

为了使它正常工作，我必须将其添加到app.scss中：

.item-md.item-block .item-inner {
    padding: 0 0 0 0 !important;
}

.label-md {
    margin: 6px 8px 0px 0;
}

并为页面创建一个自定义css文件，其中包括：

.item-md [item-left] {
  margin: 0px 0px 0px 4;
}

.item-md [item-right] {
  margin: 0px 0px 0px 0;
}

当我将app.scss中的内容移到另一个css文件时，由于某种原因，它无法工作。