Ionic 2 - 如何在两行上制作带有图标和文本的离子按钮？

Question

情况：

在我的 Ionic 2 应用程序中，我需要在两行上有菜单按钮：图标和文本。

问题是 ion-button 指令以某种方式强制按钮位于一条线上。

我需要 ion-button 指令来确保按钮始终具有正确的格式和响应定位。我只需要那个按钮在两行上。

这是我尝试的 html 和 css：

的HTML ：

 <ion-header>
  <ion-navbar>
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon>
      <br />
      <p class="menuSubTitle">MENU</p>
    </button>
    <ion-title>
      HomePage
    </ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="person"></ion-icon>
      <br />
      <p lass="menuSubTitle">LOGIN</p>
    </button>
  </ion-navbar>
</ion-header>

的CSS ：

 .menuSubTitle {
  font-size: 0.6em;
  float:left;
  display: block;
  clear: both;
}

问题：

如何在两条线上制作离子按钮？

谢谢！

原文由 FrancescoMussi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你是正确的。需要稍作修改才能使其正常工作。

这是我的标记：

 <button ion-button block color="menu-o">
    <div>
        <ion-icon name="flash"></ion-icon>
        <label>Flash</label>
    </div>
</button>

内部的 <div> 内部的 <button> 是诀窍。此标记唯一需要的是将 <label> 元素设置为 display: block 。

由于 <p> 已经是块级元素。它可能会按原样工作。

原文由 C.OG 发布，翻译遵循 CC BY-SA 4.0 许可协议