html - 如何在 ion-card-header 的右侧定位图标？

Question

这个问题可能有点傻，但我对 CSS 不是很熟悉，用 google 搜索这个问题也没有得到想要的结果。

所以我有这个 ion-card-header:

这是代码:

<ion-card-header>
      <ion-card-title>{{enActivity.customer}}</ion-card-title>
      <ion-card-title>{{enActivity.startTime | date :'HH:mm'}}</ion-card-title>
      <ion-card-title>Aktivitäten: {{enActivity.activities.length}}</ion-card-title>

      <ion-icon name="chevron-forward-outline"></ion-icon> 
</ion-card-header>

我想将最后一项，ion-icon 放在卡片标题的右侧。我如何实现这一目标？我有点困惑。

在图片中，我想把图标放在标记的位置。

这是我目前的尝试

ion-icon {
  float: right;
}

Answer 1

试试这个:

<ion-card-header>
  <ion-card-title>{{enActivity.customer}}</ion-card-title>
  <ion-card-title>{{enActivity.startTime | date :'HH:mm'}}</ion-card-title>
  <ion-card-title>Aktivitäten: {{enActivity.activities.length}}</ion-card-title>

  <ion-icon className="center-right" name="chevron-forward-outline"></ion-icon> 

ion-card-header { position: relative }
.center-right{
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
}