html - 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; 应用于列。