删除 ionic 2 中的开始和结束边界离子列表标记

Posted 2023-03-13

【中文标题】删除 ionic 2 中的开始和结束边界离子列表标记

【英文标题】：Remove start and end border ionic-list tag in ionic 2

【发布时间】：2016-12-08 02:45:51

【问题描述】：

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

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

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

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

【参考方案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;

【参考方案2】：

对我有用的解决方案是

.list-ios>.item-block:first-child 
    border-top: none;

.list-ios>.item-block:last-child 
    border-bottom: none;

如cmets中所说，下面是android版本

.list-md>.item-block:first-child 
    border-top: none;

.list-md>.item-block:last-child 
    border-bottom: none;

【讨论】：

如果你想在 iOS 中移除 ion-list 的上边框，那么 Ifeanyi Chukwu 的回答是正确的。

对于 Android 设备，您需要将 '.list-ios' 替换为 '.list-md'

【参考方案3】：

@Ifeanyi Chukwu 的回答说明了一切。

对我有用的解决方案是

.list-ios>.item-block:first-child 
    border-top: none;

.list-ios>.item-block:last-child 
    border-bottom: none;

如cmets中所说，下面是android版本

.list-md>.item-block:first-child 
    border-top: none;

.list-md>.item-block:last-child 
    border-bottom: none;

【参考方案4】：

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

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