在离子2中删除开始和结束边界ionic-list标签

Question

只想删除开始和结束边框。我是这种编程语言的新手。我正在使用下面的代码来显示列表。

<ion-content>
<ion-list class="item">
  <ion-item href="#">
    Hello!
  </ion-item>
   <ion-item  href="#">
    Hello2
  </ion-item>

</ion-list>  
      </ion-content>

我需要在下面提到的屏幕截图中删除突出显示的红色圆圈边框。怎么做？

Answer 1

一种方法是在ion-list元素中添加 no-lines ，如下所示：

<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;
}

Answer 2

对我有用的解决方案是

.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;
}

Answer 3

@Ifeanyi Chukwu的答案就可以了。

  

最适合我的解决方案是

1 -> 2   15
1 -> 3   10
2 -> 1   0
2 -> 3   12
3 -> 1   4
3 -> 2   3

如评论中所述，以下是android版本

.list-ios>.item-block:first-child {
    border-top: none;
}
.list-ios>.item-block:last-child {
    border-bottom: none;
}

Answer 4

如果要在列表中隐藏持久离子项目的边框。 在Scss文件中使用它。

ion-item:last-child {
   --border-style: none;
}