离子项目的右下边框答案

【问题标题】：Bottom right border on ion-item离子项目的右下边框
【发布时间】：2017-09-06 08:02:07
【问题描述】：

我有一个 ion-item 描述为：

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

问题在于，这给了我的 ion-item 一个奇怪的右下边框，您可以查看它：

我发现按钮类的边框属性为：

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：

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

【问题讨论】：

请说明你到底想要什么？
好像ion-label 有一个边框底部属性。
@Santhoshkumar 删除第一张图片的底部边框

标签： html css ionic-framework

【解决方案1】：

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

【讨论】：

在 ionic 4 中使用 lines="none"
对于 ionic5 lines="none" 还不够...必须添加 css 覆盖：on-item:last-child {--inner-border-width: 0; }see here

【解决方案2】：

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

<ion-item lines="none">

【讨论】：

适用于 Ionic 5

【解决方案3】：

感谢贝利安先生的评论，找到了答案。我又去看看。

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

如您所见，它有一个边框底部。我在我的 scss 文件中覆盖了它，现在看起来很好。

【讨论】：