如何去除ion-item周围的填充物？

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-no-padding 类

<ion-item class="ion-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>

编辑：作为 Ionic 5.X，我们必须按类而不是属性使用 CSS 实用程序（ionic/BREAKING.md）。

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-no-padding

类赋予

ion-item

即可删除填充：

<ion-item class="ion-no-padding">
  <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;">
...

Answer 6

如果您不想为每个离子项添加无填充，请为整个应用程序删除它。

对于 ionic v4，您可以将其添加到 global.scss 中：

ion-item {
    --padding-start: 0;
}

来源：https://ionicframework.com/docs/api/item#css-custom-properties

Answer 7

从页面内容中删除填充可以解决问题

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