如何去除离子项目周围的填充物？

Question

我想padding从我的离子项目中删除，以便它可以占据整个width页面。

请在开发工具中查看padding离子项目的周围。

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="...">
      </ion-thumbnail> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

ion-item的填充为16px，当我检查ion-item时，也在class =“ scroll-content”上，我在检查器中找到了scss

ion-app.md [padding] .scroll-content {
    padding: 16px;
}

如果删除此填充，则ion-item可以通过删除此填充来占据整个宽度，但是当我在scss文件中使用此填充时，不会删除该填充。

Answer 1

对于那些使用 ionic 4 的人，你应该使用Ionic CSS Utilties 进行填充

简而言之，您必须对此进行编码：

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

如果要删除内部填充，请使用 ion-item自定义 CSS 属性：

ion-item {
  --padding-end: 0px;
  --inner-padding-end: 0px;
  // here other custom CSS from documentation
}

Answer 2

您可以用ion-item其他方式解决填充问题...

第一：使用无填充

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

第二：使用CSS或内联样式

<ion-item style="padding:0px !important;">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Answer 3

我不得不为ion-item使用自定义CSS 属性

ion-item {
  --inner-padding-bottom: 0;
  --inner-padding-end: 0;
  --inner-padding-start: 0;
  --inner-padding-top: 0;
}

Answer 4

只需给离子项目不填充，它将删除填充

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

参考离子文档

Answer 5

也遇到了同样令人抓狂的问题。事实证明，ion-item 有一些 --inner-padding 规则，需要重写这些规则才能阻止 padding 出现在它的子项上

以及添加

class="ion-no-padding"

我还需要添加以下 css 样式规则

--inner-padding-end: 0 !important;

制作最终元素

<ion-item *virtualItem="let section" lines="none" class="ion-no-padding" style="--inner-padding-end: 0 !important;">
...