8

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

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

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

我需要删除下面提到的屏幕截图上突出显示的红色圆圈边界。怎么做? 在此处输入图像描述

4

4 回答 4

18

一种方法是在元素中添加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;
}
于 2016-08-02T17:22:56.017 回答
8

对我有用的解决方案是

.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;
}
于 2016-11-22T08:00:22.133 回答
0

@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;
}
于 2019-05-23T12:28:20.593 回答
0

如果要隐藏列表中最后一个离子项的边框。在 Scss 文件中使用它。

ion-item:last-child {
   --border-style: none;
}
于 2020-07-08T12:43:40.357 回答