CSS宽度未按预期设置

Question

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

我有以下css:

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

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

如果有人可以建议我如何调整每个列宽,我将不胜感激.谢谢

UPDATE

我正在使用一个生成原始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;列.