未按預期設置CSS寬度

我有以下幾點。正如你所看到的，我有一排兩列。我將第一列設置爲90％的寬度，第二列設置爲10％的寬度。但正如你所看到的，這些列的長度是相同的。未按預期設置CSS寬度

我有以下的CSS：

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

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

如果任何人都可以告訴我怎麼可以調整每個列的寬度，我將不勝感激。由於

UPDATE

我使用的是Ionic2框架生成原始的HTML。這裏是我的代碼：

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

來源

2017-04-20 Richard

請顯示您的實際html，而不是它的圖片。我猜這是與父容器之一的大小有關 – Pete

請參閱上面的更新。我使用離子，所以生成的HTML代碼。 – Richard

只是使用離子的col類; '';我認爲ion-col會覆蓋你的 – Mazz

先刪除山坳類，因爲它有一些彎曲的特性，然後應用display:block;到列。

來源

2017-04-20 13:38:49 Vijay

未按預期設置CSS寬度

回答

相關問題