只想删除开始和结束边框。我对这种编程语言很陌生。我正在使用下面的代码来显示列表。
<ion-content>
<ion-list class="item">
<ion-item href="#">
Hello!
</ion-item>
<ion-item href="#">
Hello2
</ion-item>
</ion-list>
</ion-content>
只想删除开始和结束边框。我对这种编程语言很陌生。我正在使用下面的代码来显示列表。
<ion-content>
<ion-list class="item">
<ion-item href="#">
Hello!
</ion-item>
<ion-item href="#">
Hello2
</ion-item>
</ion-list>
</ion-content>
一种方法是在元素中添加no-lines ,如下所示:ion-list
<ion-list no-lines>...</ion-list>
但这也会删除项目的行。因此,为了仅删除底部的那一行,您可以添加以下样式规则:
.md ion-list > .item:last-child,
.md ion-list > .item-wrapper:last-child .item,
.wp ion-list > .item:last-child,
.wp ion-list > .item-wrapper:last-child .item,
.ios ion-list > .item:last-child,
.ios ion-list > .item-wrapper:last-child .item {
border-bottom: none;
}
对我有用的解决方案是
.list-ios>.item-block:first-child {
border-top: none;
}
.list-ios>.item-block:last-child {
border-bottom: none;
}
如评论中所述,以下是android版本
.list-md>.item-block:first-child {
border-top: none;
}
.list-md>.item-block:last-child {
border-bottom: none;
}
@Ifeanyi Chukwu 回答了这一切。
对我有用的解决方案是
.list-ios>.item-block:first-child {
border-top: none;
}
.list-ios>.item-block:last-child {
border-bottom: none;
}
如评论中所述,以下是android版本
.list-md>.item-block:first-child {
border-top: none;
}
.list-md>.item-block:last-child {
border-bottom: none;
}
如果要隐藏列表中最后一个离子项的边框。在 Scss 文件中使用它。
ion-item:last-child {
--border-style: none;
}