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

Question

我有一个 ion-item 带有 ion-avatar 和带有大文本的 ion-label。为了在 ion-label 中显示全文，我在 ion-label 中添加了 class 'ion-text-nowrap'。它工作正常。但问题是离子头像自动放置在离子项目的垂直中心。我不需要对齐头像垂直对齐中间。我想要对齐 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-avatar 和 ion-label 的 css 来实现。

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

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

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

示例输出：

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

How to place ion-avatar top-left of an ion-item?

ionic-framework

ionic3

ionic4