Ionic 2将按钮标签对齐到左侧

Question

我在Ionic 2中创建了一个按钮,如下所示:

  <button secondary block round padding style="text-align : left;">
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
    Login
  </button>

我试图将按钮文本对齐到左侧,但它不会到那里.有没有可用于实现这一目标？

Answer 1

Ionic将按钮的内容包装到<span>具有该类的标签中.button-inner.因此,当您检查HTML标记时,HTML标记看起来像这样

<button secondary block round padding>
    <span class="button-inner">            
        <ion-icon ios="ios-key" md="md-key" item-right></ion-icon>
        Login
    </span>    
    <ion-button-effect></ion-button-effect>
</button>

本.button-inner类应用Flexbox的属性来定位文本和图标的中央.您可以覆盖justify-content属性并将值更改center为flex-start,这将告诉内容(文本和图标)从框的开头开始.

例

如果要将其应用于所有按钮

.button-inner{
    justify-content:flex-start;
}

如果要将其应用于特定按钮(.specific-button将其作为类添加到按钮组件中)

.specific-button .button-inner{
     justify-content:flex-start;
}