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：middle isn'ta解决方案（与col＆amp; row对齐）......有没有人有想法？

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

2 个答案: