如何在离子列表中显示两个右对齐的图标？

Question

我正在尝试列出可以单击的两个按钮图标列表.我尝试过这样的事情,但图标重叠:

<ion-list>
    <ion-item ng-repeat="item in items" class="item-button-right">
        {{ item.Info }}
        &nbsp;

        <button class="button button-positive" ng-click="Accept(item)">
            <i class="icon ion-checkmark"></i>
        </button>
        <button class="button button-assertive" ng-click="Reject(item)">
            <i class="icon ion-close"></i>
        </button>
    </ion-item>
</ion-list>

我想要获得的理想行为是在左侧显示一些小信息,并在右侧显示两个选项.

我在这里有一个简单的自包含正确示例:http://codepen.io/anon/pen/vzLob

Answer 1

我最近遇到了这个问题,并发现Ionic提供了一个类.buttons,当被包裹在多个按钮元素周围时,它们并排放置.

这避免了必须使用!important通常被认为是CSS中的不良做法.

这是一个适合我的代码示例:

<div class="item item-button-right">
                List item 1  
                <div class="buttons">
                    <button class="button button-energized">
                        <i class="icon ion-android-locate"></i>
                    </button>
                    <button class="button button-dark">
                        <i class="icon ion-android-arrow-forward"></i>
                    </button>
                </div>
            </div>

还注意到你的代码笔附件,所以我认为我也会更新它以进行演示.

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

Answer 2

这是一个例子

<ion-view ng-controller="inspectorsCtrl as vm">
    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat=" item in vm.items" class="item-icon-right">
                {{item.info}}
                <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>