离子行显示同一行中的所有元素答案

【问题标题】：Ion row show all elements in same line离子行显示同一行中的所有元素
【发布时间】：2018-10-06 08:39:54
【问题描述】：

如果单击反向图标（旋转的交换图标），我必须显示反向货币汇率。但是我的倒置图标总是滑入换行符。我怎样才能避免这种情况？我需要将其与行中的其他元素保持一致。左边什么都没有。

  <ion-row>

   <div col-7 offset-5 no-padding text-right>
     <ion-label  *ngIf="!showInverted" no-margin  class="rate label-tx">1 {{transaction.SendCurrency}} = {{transaction.ExchangeRate | amountFormat}} {{transaction.PayoutCurrency }}</ion-label>
     <ion-label *ngIf="showInverted" no-margin  class="rate label-tx">1 {{transaction.PayoutCurrency}} = {{1/transaction.ExchangeRate | amountFormat}} {{transaction.SendCurrency }}</ion-label>
     <button (click)="showInvertedRate()" ion-button clear color="dark">  <ion-icon name="swap" class="rotate90"></ion-icon></button>
   </div>
 </ion-row>

In my Ts file:

     showInvertedRate()
      {
        this.showInverted = !this.showInverted ;
      }

我的 Scss：

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  padding-right: 10px;
}

截图：

【问题讨论】：

点击反转时，您的反转货币值宽度是否会发生变化？
是的，这取决于货币。如何处理这个小sn-p会很棒，或者你可以在我提供的sn-p上工作。

标签： html css angular cordova ionic-framework

【解决方案1】：

既然你说，内容调整大小，按钮没有获得足够的空间，因此它转到下一行。

解决这个问题的方法是用按钮固定，将剩余内容分组并使用

width:calc(100% - 30px);

对于剩余的内容。

请注意，width:calc(100% - 30px) 还应考虑应用于按钮或内容的任何边距。

.inner{
  display:inline:block;
  width:calc(100% - 30px); /*30px. should be same as button width */ 
}
.buuton{
  width:30px;
}

<ion-row>

  <div col-7 offset-5 no-padding text-right>
    <div class="inner">
      <ion-label *ngIf="!showInverted" no-margin class="rate label-tx">1 </ion-label>
      <ion-label *ngIf="showInverted" no-margin class="rate label-tx">1 </ion-label>
    </div>
    <button (click)="showInvertedRate()" ion-button clear color="dark">  <ion-icon name="swap" class="rotate90"></ion-icon></button>
  </div>
</ion-row>

【讨论】：

在我的解决方案上试试这个。