【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2016-02-10
      • 2010-10-30
      • 2018-08-31
      • 1970-01-01
      • 2019-01-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-02-08
      相关资源
      最近更新 更多