如何离子按钮对齐内容？答案

【问题标题】：How to ion-button justify-content?如何离子按钮对齐内容？
【发布时间】：2019-02-08 04:11:37
【问题描述】：

我有以下代码：

<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被完全忽略了。

【问题讨论】：

标签： css ionic4

【解决方案1】：

如果您在按钮内添加 div 并使用 Ionic 4 CSS Utilities（在您的情况下为 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

【讨论】：

太棒了。没想到会发生这样的事情……谢谢托马斯！
@Kai-SebastianBirkenstock 乐于提供帮助；）

【解决方案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

【讨论】：