Question

我有以下代码：

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

我希望内容（TEXT和离子图标）向左对齐并尝试：

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

如何按正则按钮？

2 个答案: