离子离子导航标题自定义内容显示错误

Question

我试图完成这个：

这是我的代码：

在视图中，我将其添加到标题：

int

我用这个css：

<ion-nav-title>
    <div class="progress">
      <div class="active"><div>Selección</div></div>
      <div><div>Destino</div></div>
      <div><div>Pago</div></div>
    </div>
</ion-nav-title>

你可以在codepen中玩这个（请分叉）：

http://codepen.io/anon/pen/NqLvMN

但我明白了：

如果我更改.progress＆gt; div> div显示为内联我得到了这个：

帮助！

Answer 1

根据第一张图片，我做了以下

CSS更改

.progress > div {
  display: inline-block; /* Horizontal alignment */
  line-height: 15px; /* Vertical alignment */
  width: 33%; /* Equal width 3 columns */
}

Updated Codepen