离子离子物品右侧和以物品为中心

Question

我有一个离子框架的问题，我希望有人可以帮助我......我有一个离子列表，其中包含“ion-item-right”。 这没关系，按钮在右边。 现在我需要有三个其他图标，它们居中，所以我有：文本 - 3个图标居中 - 1个图标右

这是我的代码：

<ion-item
        class="item-stable accordion item-icon-right"
        ng-show="!skillHasSubskill(skill)">
        {{skill.skillName}}
        <i class="icon ion-star"></i>
        <i class="icon ion-star"></i>
        <i class="icon ion-star"></i>
        <a class="button marginrighticon button-icon icon ion-close energized" ng-click="deleteSkill(skill)"></a>
    </ion-item>

当然，这不起作用。 三个“离子星”应该居中，但我还没有找到一个标签，我可以做到这一点......我希望有人可以帮助我;）

Answer 1

我认为你必须做一些CSS样式......像这样：

  <ion-item class="item-stable accordion item-icon-right item-button-right" ng-show="!skillHasSubskill(skill)">
    {{skill.skillName}}
    <div class="icon" style="margin-right: 80px">
      <i class="ion-star"></i>
      <i class="ion-star"></i>
      <i class="ion-star"></i>
    </div>
    <a class="button button-icon" ng-click="deleteSkill(skill)">
      <i class="icon ion-close energized"></i>
    </a>        
  </ion-item>

Answer 2

对于每个有相同问题的人...上面的解决方案在很多方面都是正确的，但我不得不采用它...这是我的代码：

<ion-item
        class="item-stable accordion nopadding"
        ng-show="!skillHasSubskill(skill)">
    <div class="row">
        <div class="col">{{skill.skillName}}</div>
        <div class="col">
            <i class="padding-right icon ion-star"></i> <i
                class="padding-left padding-right icon ion-star"></i> <i
                class="padding-left icon ion-star"></i>
        </div>
        <a
            class="button button-icon button-right icon ion-close energized"
            ng-click="deleteSkill(skill)"></a>
    </div>
    </ion-item>

我不得不这样做，因为在离开物品的高度之上张贴的另一种方式太大了，因为图标是在自己的行中解释的，而不是与普通文本相同;）

但非常感谢你！

编辑：我有另一个愚蠢的问题：文本没有垂直对齐... vertical-align：中间isn'ta解决方案（与col＆row对齐）...有任何想法？