时间戳

首页 > 解决方案 > 如何在 ion-card-header 右侧定位图标？

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

问题描述

这个问题可能有点愚蠢，但我对 CSS 不太熟悉，谷歌搜索问题并没有得到预期的结果。

所以我有这个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;
}

标签： htmlcssangularionic-framework

解决方案

尝试这个：

<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%);
}

推荐阅读