从ion-item中移除填充- Ionic 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文件中设置为0 !important的填充仅会移除ion-item左侧的填充，而保留顶部和右侧的填充。请参考以下截图： 编辑 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>

- Rick

---

我认为我也遇到了同样的问题，您能否在浏览器中发布HTML代码的屏幕截图？我相信某些标签会获得类，从而给这些元素一些样式。 - Jeroen

将以下代码放入您的 .sass 文件中：.label { margin: 0 0 0 0; }，并查看发生了什么。 - amin arghavani

@aminarghavani，这实际上是移除了顶部和底部的填充。它也减少了右侧的填充，但仍然有一些空间。 - Rick

@JeroenKnockaert 如果您查看我问题的编辑，我已经发布了整个scss文件。 - Rick

@Rick，实际上我省略了边距。你可以在 .label{} 类中省略填充。 - amin arghavani

@aminarghavani 将 margin: 0 0 0 0; 替换为 padding: 0 0 0 0;，我得到了与之前相同的结果，即在顶部和底部填充。 - Rick

Answer 1

使用这个代码：

.label {
   margin: 0;
}

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

- amin arghavani

---

太好了！非常感谢 ;) - Rick

Answer 2

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

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

- Aryeh Beitz

---

谢谢，这正是我所需要的。 - langauld