如何离子按钮调整内容？

Question

我有以下代码：

<ion-button expand=“full” (click)=“do()“>
  <ion-icon name=“cart” slot=“start”></ion-icon>
  TEXT
</ion-button>

我想让内容（文本和离子图标）左对齐并尝试过：

ion-button {
  display: flex;
  justify-content: flex-start;
}

我认为这会导致内容向左对齐，但没有任何反应。似乎 css 被完全忽略了。

Answer 1

如果您在按钮内添加 div 并使用 Ionic 4 CSS 实用程序（在您的情况下为 text-left / text-start），则可以将文本和图标左对齐。

<ion-button expand=“full” (click)=“do()“>
 <div text-left>
  <ion-icon name=“cart” slot=“start”></ion-icon>
  TEXT
 </div>
</ion-button>

确保为 div 提供按钮的完整宽度

ion-button > div {
  width: 100%;
}

文档：
Ionic 4 CSS Utilities

Answer 2

用 span 包住你的内心并添加 css

  .inner-span{
    margin-left:auto;
  }

如下（使用"代替“）

<ion-button expand="full" (click)="do()">
  <span class="inner-span">            
   <ion-icon name="cart" slot="start"></ion-icon>
   TEXT
  </span> 
</ion-button>

See working code

如何离子按钮调整内容？

How to ion-button justify-content?

css

ionic4