css - 在 ionic 2 中将按钮文本和其他 ion-col 文本对齐到底部

Question

我的代码如下:

<ion-row><ion-col ><button ion-button outline no-padding  large (click)="setUserName()">D</button>ay in the life </ion-col></ion-row>

这看起来很难看，因为字母 D 位于中间，整体列文本略高于。

我想要的只是底部对齐的一切。

Answer 1

发生了什么事？

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  position: relative;
  width: 100%;
  margin: 0;
  min-height: 1px;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

<ion-row class='row'>
  <ion-col class='col'><button ion-button outline no-padding large (click)="setUserName()">D</button>ay in the life </ion-col>
</ion-row>