离子项的右下边界

Question

我的离子项描述为：

  <ion-row>
  <ion-item class = "Checkbox">
<ion-label>Remember my choice</ion-label>
<ion-checkbox [(ngModel)]="remember"></ion-checkbox>
  </ion-item>
  </ion-row>

其中Checkbox类描述为：

.Checkbox {
   color: white;
   background:#c34545;
}

问题是，这给了我的离子项一个奇怪的右下边框，你可以看看：

我在按钮类上找到了border属性：

button {
border: 0;
border-top-color: initial;
border-top-style: initial;
border-top-width: 0px;
border-right-color: initial;
border-right-style: initial;
border-right-width: 0px;
border-bottom-color: initial;
border-bottom-style: initial;
border-bottom-width: 0px;
border-left-color: initial;
border-left-style: initial;
border-left-width: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;

但禁用它会给我这个：

这真让我脱掉头发。 scss文件中唯一可能的其他冲突是我定义的离子行：

ion-row {
   align-items: center;
   text-align: center;
}

Answer 1

删除底线的最佳方法是将no-lines属性添加到ion-item。无需添加任何css样式。

Answer 2

感谢Mr.Bellians＆＃39;评论。我去看了一眼。

.item-md.item-block .item-inner {
padding-right: 8px;
border-bottom: 1px solid #dedede;
  }

你可以看到它有一个边框底部。我在我的scss文件中覆盖了它，现在看起来很好。

Answer 3

向 ion-item 标签传递一个名为 lines 且值为 none 的参数。

<ion-item lines="none">