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

How can I show two icons as right aligned within an ionic list?

提问by Mike Bailey

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>

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.

我想要获得的行为是在左侧显示一些小的信息模糊，并在右侧显示两个选项。

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

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

回答by Will.Harris

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

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

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

这避免了不得不使用!important在 CSS 中通常被认为是不好的做法。

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>

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

还注意到你的代码笔附件，所以我想我也会更新它来演示。

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

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

回答by Jose Armando Romero Bonilla

Here is an example

这是一个例子

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

回答by sagar potdar

Try like this:

像这样尝试：

First take one div class and then take 2 buttons inside the div tag.

首先取一个 div 类，然后取 div 标签内的 2 个按钮。

<div class="buttons" > 
    <button class="button button-icon" >
        <i class = "icon ion-funnel"></i>
    </button>
    <button class="button button-icon" >
        <i class = "icon ion-android-document"> </i>
    </button>   
</div>

回答by Mikel

The solution using .buttons works only if the text is not long or if there are only two icons.

仅当文本不长或只有两个图标时，使用 .buttons 的解决方案才有效。

Along with flexbox it works in any situation.

它与 flexbox 一起适用于任何情况。

<ion-list>
  <ion-item 
    ng-repeat="item in items"
    class='item-multiple-buttons'
  >
    <div class="buttons buttons-left">
      <button class="button button-icon ion-checkmark-circled"></button>
      <button class="button button-icon ion-information-circled"></button>
    </div>

    <div class="item-content" >
          {{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>

    <div class="buttons buttons-right">
      <button class="button button-icon ion-close-circled"></button>
      <button class="button button-icon ion-help-circled"></button>
      <button class="button button-icon ion-minus-circled"></button>
      <button class="button button-icon ion-plus-circled"></button>
    </div>
  </ion-item>
</ion-list>

SCSS:

社会保障：

/* Variable values from ionic */
$item-padding: 16px;
$item-icon-font-size: 32px;

// From _button.scss, hardcoded value
$button-icon-padding: 6px;

.item {     
  &.item-multiple-buttons{
    display: flex;
    padding: 0 $item-padding;

    .item-content{
      flex: 1;
      padding: $item-padding 0;
    }

    .buttons{
      display: flex;

      &.buttons-left{
        margin-right: $item-padding - $button-icon-padding;
      }

      &.buttons-right{
        margin-left: $item-padding - $button-icon-padding;
      }

      .button{
        font-size: $item-icon-font-size;
      }
    }
  }
}

Codepen: http://codepen.io/M1k3l/pen/PWBdOB

代码笔：http://codepen.io/M1k3l/pen/PWBdOB