未按预期设置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宽度

回答

相关问题