从离子项内部去除填充 - 离子2 AngularJS 2

Question

这是我的 scss档案:

page-home {

    .scroll-content{
        padding: 8px;
    }

    ::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

    .item {
        border: solid #dddddd;
        border-radius: 2px;
        border-width: 1.5px;
        padding: 0 !important;
        margin-bottom: 8px;
    }

    img.imgmg {
        width: 100%;
        height: auto;
    }

}

这是我的 html档案:

<ion-header>
  <ion-navbar color="primary">
    <ion-title text-center>
      App Name
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>
      <ion-thumbnail>
        <img class="imgmg" src="...">
      </ion-thumbnail>
      <div>...</div> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

奇怪的是,scss文件中的padding设置为0!important仅删除了离子项左侧的填充,使填充保持在顶部和右侧.

编辑

scss:

page-home {

    .scroll-content{
        padding: 8px ;
    }

    .label { 
        margin: 0 0 0 0; 
    }

    ::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

    h2.title {
        font-size: 20px;
        margin-top: -8px;
        margin-left: 16px;
    }

    .item {
        border: solid #dddddd;
        border-radius: 2px;
        border-width: 1.5px;
        padding: 0 !important;
        margin-bottom: 8px;
    }

    div.bar {
        padding: 8px;
    }

    img.imgmg {
        width: 100%;
        height: auto;
    }

    img.ndp {
        width: 36px;
        height: 36px;
    }

    div.ndph {
        margin-left: 8px;
    }

}

html:

<ion-header>
  <ion-navbar color="primary">
    <ion-title text-center>
      App Name
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
    <ion-list>
      <ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>
        <ion-thumbnail>
          <img class="imgmg" src="..url image..">
        </ion-thumbnail>
        <div class="bar">
          <div style="display:inline-block; vertical-align: middle;">
            <img class="ndp" src="..url image..">
          </div>
          <div style="display:inline-block; vertical-align: middle;" class="ndph">
            <p><strong><font color="#343434">Text</font></strong></p>
            <p>Text</p>
          </div>
        </div> 
      <h2 class="title">Title text</h2>
    </ion-item>
  </ion-list>
</ion-content>

Answer 1

使用此代码:

.label {
   margin: 0;
}

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

Answer 2

这在 Ionic 4 中对我有用（我知道问题是针对 Ionic 2 的）

ion-item {
  --ion-safe-area-right: 0;
}