首页 文章

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

提问于
浏览 次
0

我想从我的离子项中删除 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>

离子项的填充量为16px，当我检查离子项时，以及class =“scroll-content”，我在检查器中发现了scss

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

如果我删除这个填充，那么ion-item可以通过删除这个填充占据整个宽度，但是当我在我的scss文件中使用它时，填充不会被删除 .

html css ionic-framework ionic2 ionic3

3 回答

  • -1

    你可以用不同的方式解决 ion-item 填充...

    First: Using no-padding

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

    Second: Using css or inline style

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

    只是给离子项填充无填充它将删除填充

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

    参考离子docs

    回复于
  • 3

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

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

相关问题