ionic-framework - 如何将离子化身放置在离子项目的左上角？

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>

标签： ionic-frameworkionic3ionic4

Answer 1

在 Ionic 中没有 css 属性可以实现这一点。但是可以通过覆盖ion-avatarand的 css 来实现ion-label。

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

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

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

---

示例输出：