如何将离子头像放置在离子项目的左上角？

Question

我有一个带有离子头像和带有大文本的离子标签的离子项目。为了在 ion-label 中显示全文，我向 ion-label 添加了一个类“ion-text-nowrap”。它工作正常。但问题是 ion-avatar 自动放置到 ion-item 的垂直中心。我不需要对齐头像垂直对齐中间。我想要那个对齐 ion-item 的左上角。我怎样才能做到这一点？

这是我的代码：

<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-avatarand的 css 来实现ion-label。

将头像的位置更改为absolute并将其放置在项目的顶角。然后调整标签边距以将文本放回您想要的位置。

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

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

示例输出：