如何将离子化身放置在离子项目的左上方？

Question

我有一个带有ion-avatar的ion-item和带有大文本的ion-label。 为了在ion-label中显示全文，我在ion-label中添加了“ ion-text-nowrap”类。 工作正常。 但是问题是离子化身会自动放置在离子项目的垂直中心。 我不需要对齐头像垂直对齐中间。我要使离子项目左对齐。我该怎么办？

这是我的代码：

<ion-item>
  <ion-avatar slot="start">
    <img [src]="img">
  </ion-avatar>
  <ion-label class="ion-text-nowrap">
    <p>{{text}}</p>
  </ion-label>
</ion-item>

Answer 1

在Ionic中没有实现此目的的CSS属性。 但是可以通过覆盖ion-avatar和ion-label的css来实现。

将化身的位置更改为absolute，并将其放置在项目的右上角。然后调整标签边距，将文本放回所需位置。

ion-avatar{
  position: absolute;
  top: 0px;
  left: 0px;
}

ion-label{
  margin-left: // size needed
}

---

示例输出：