css - 将 元素底部对齐到 ionic 柱内

Question

我正在尝试对齐 <a>标记列底部的元素，我尝试在顶部/底部放置边距，填充但没有产生任何影响，所附图像是当前状态，我希望“链接”向下并位于同一级别按钮底部，是否存在实现此目标的任何推荐方法。

      <ion-row style="display: flex;">
              <ion-col text-right>
                <a href="" class="headerLink">Report
                  a Problem</a>
                <button color="light" ion-button  (click)="writebackData()">Button1</button>
                <button color="light" ion-button  (click)="writebackData()">Button2</button>
              </ion-col>
            </ion-row>

            .headerLink{
          color: red;
          padding-right: 3px;

align-items: center;
        }

Answer 1

只需在 ion-col 标签中添加 style="display: flex; justify-content: flex-end; align-items: flex-end;" 即可解析你的问题。谢谢

.headerLink{
   color: red;
   padding-right: 3px;
   align-items: center;
}

<ion-row style="display: flex;">
   <ion-col text-right style="display: flex; justify-content: flex-end; align-items: flex-end;">
      <a href="" class="headerLink">Report a Problem</a>
      <button color="light" ion-button (click)="writebackData()">Button1</button>
      <button color="light" ion-button  (click)="writebackData()">Button2</button>
   </ion-col>
</ion-row>