CSS宽度未按预期设置

Question

我有以下内容。如您所见，我有一行有两列。我将第一列设置为宽度为90％，将第二列设置为宽度为10％。但正如您所看到的，列的长度相同。

我有以下css：

.message-footer-col {
  width: 90%;
}

.message-footer-button-col {
  width: 10%;
}

如果有人可以建议我如何调整每个列的宽度，我将不胜感激。感谢

更新

我正在使用生成原始html的Ionic2框架。这是我的代码：

<ion-footer class="message-footer">
  <form #f="ngForm">
    <ion-grid class="message-footer-grid">
      <ion-row class="message-footer-row">
        <ion-col class="message-footer-col">
          <ion-input class="message-footer-input" [(ngModel)]="message" name="messageText" required placeholder="message..."></ion-input>
        </ion-col>
        <ion-col class="message-footer-button-col">
          <button class="message-footer-button" (click)="messageSend(f.value, f.valid)" full [disabled]="f.valid === false"><ion-icon class="message-send" name="send"></ion-icon></button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-footer>

Answer 1

首先删除col类，因为它具有一些flex属性， 然后将display:block;应用于列。