我怎么能显示两个图标作为右离子列表中的排列？ [英] How can I show two icons as right aligned within an ionic list?

问题描述

我试图把在可点击的列表中有两个按钮图标。我试图做这样的事情，但这些图标重叠：

I'm trying to put in a list two button icons that can be clicked. I tried doing something like this but the icons overlap:

<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>

我想，以获得所需的行为是显示在左边，present右边两个选项信息的一些小的Blurb。

The desired behavior I'm trying to get is show some small blurb of info on the left and present two options on the right.

我有一个简单自包含正确的示例在这里：的http：// codePEN。 IO /匿名/笔/ vzLob

I have a Simple Self Contained Correct Example here: http://codepen.io/anon/pen/vzLob

推荐答案

最近，我遇到了这个问题，并发现了离子提供了一个名为 .buttons 类缠时多个按钮元素并排放置它们的一面。

I recently ran into this problem and discovered that Ionic provides a class called .buttons which when wrapped around multiple button elements positions them side by side.

这避免了使用！重要这在一般被认为是CSS不好的做法。

This avoids having to use !important which in general is considered bad practice in CSS.

这里的code这为我工作的一个例子：

Here's an example of the code which worked for me:

<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>

也注意到您的code笔附件以便想过我会更新过证明。

Also noticed your code pen attachment so thought i'd update that too to demonstrate.

的http：//$c$cpen.io/anon/pen/bNjypG

这篇关于我怎么能显示两个图标作为右离子列表中的排列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！