angular - Ionic 2 列表全宽分隔线

我目前在 Ionic 2 应用程序上有一个列表，分隔符仅在最后一个元素上是全宽的。
结果如下:



我希望所有元素都具有全宽边框。在文档中找不到关于此的任何内容.. 提前感谢您的帮助!

编辑 :
这是我的代码:

<ion-list no-padding="">
    <ion-item *ngFor='let like of likes' (click)="goTo(like.qrcode)" text-wrap>
        <ion-thumbnail item-left>
            <img class="item item-thumbnail-left" [src]="like.logo">
        </ion-thumbnail>
        <h2>{{like.name}}</h2>
        <h3 class="establishment">{{like.type}}<br /></h3>
        <p class="establishment">{{like.city}}<br /></p>
        <!--<button ion-button clear item-right>View</button>-->
    </ion-item>
</ion-list>

最佳答案

您可以通过使用 no-lines 属性(为了隐藏没有全宽的边框)并添加自定义样式规则来在这些项目中添加边框来做到这一点。请看一下 this plunker 。

所以在你看来:

  <ion-list>
      <ion-item no-lines class="bottom-border" *ngFor="..">
          ...
      </ion-item>
  </ion-list>

然后在 .scss 文件中:

.item[no-lines].bottom-border {
    border-bottom: 1px solid grey;
}

关于angular - Ionic 2 列表全宽分隔线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44007971/