对齐<a> element bottom inside ionic column

Question

I am trying to align <a> tag element bottom of the column, I tried putting margin, padding on top/bottom but not making any impact,The image attached is the current status , I want the 'link' to go down and sit in same level button base, is there any recommended way to achieve this.

      <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

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

.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>

Answer 2

我在对齐离子栅内部的项目时也遇到了很多困难。我建议创建一个新的离子行并将链接放在其中。

Answer 3

现在将icon-col设置为inline flex，您就可以用边距控制它了

abc = returnSection("1","2");
element1 = abc[0];
element2 = abc[1];

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

        }
        ion-col {
    display: inline-flex;
}