如何摆脱侧面菜单按钮边框

Question

所以我有一个离子移动应用程序，我目前正在改进侧边菜单的用户界面设计。

所以这里的问题是我很难移除每个按钮的边框。

这是我的代码：

   <ion-content>
<ion-list no-border>
  <button menuClose ion-item class="profileContainer color" text-center (click)="openProfile()">
    <img src="{{profileImage}}" style="height: 20%; width: 30%;">
    <h1>{{profileName}}</h1><p>{{profileEmail}}</p>
  </button>
  <button class="otin" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    {{p.title}}
  </button>
  <button class="otin" menuClose ion-item (click)="logoutUser(event)">
    Logout
  </button>
</ion-list>

SASS

  .profileContainer{
// padding-bottom: 1rem;
// margin: 0 auto;
padding-left: 0;
}
  .otin{
 background-color: map-get($colors, headerbackground);
 }

如何消除按钮上方和下方的白色边框？我试过border-style:none，但我仍然面临同样的问题。

Answer 1

在您的 SASS 文件中添加以下代码，希望它会删除边框底部。

  .otin.item-block .item-inner, .item-md.item-block .item-inner {
    border: 0 !important;
}

让我知道它是否适合你。