ionic2 ion-list too much padding答案

【问题标题】：ionic2 ion-list too much paddingionic2 ion-list too much padding
【发布时间】：2017-05-19 05:18:29
【问题描述】：

离子列表右侧的填充过多。

我可以使用

减少左侧的填充

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;
}

其他格式问题：

如何消除项目之间的线条？
为什么只有文字下面有线条而不是图片？
如何让第二行文本（灰色文本）换行成两行？

【问题讨论】：

除了“no-padding”之外，您尝试（根据上面的 css）要定位的所有类都不存在于 html 标记中
您应该在浏览器中运行您的应用程序，然后检查元素并尝试找出哪个元素有填充。

标签： css ionic-framework ionic2

【解决方案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 文件时，由于某种原因它不起作用。

【讨论】：