[英]How to remove the padding around ion-item?
我想从我的 ion-item 中删除padding
,以便它可以占据页面的整个width
。
请查看开发工具以查看 ion-item 周围的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 文件中使用它时,填充不会被删除。
您可以以不同的方式解决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,我们必须按类而不是属性( ionic/BREAKING.md )使用 CSS 实用程序。
对于那些使用 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
}
只需为 ion-item 设置无填充,它就会移除填充
<ion-item no-padding>
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
参考离子文档
如果您不想为每个 ion-item 添加 no-padding,请在整个应用程序中将其删除。
对于ionic v4 ,您可以将其添加到 global.scss :
ion-item {
--padding-start: 0;
}
来源: https : //ionicframework.com/docs/api/item#css-custom-properties
从页面内容中去除padding解决问题
<ion-content>
<ion-list>
<ion-item>
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
</ion-list>
</ion-content>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.