css - 在离子柱内对齐元素底部

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

标签： cssionic-framework

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>