Right align multiple buttons or icons


#1

Is there a way to right align multiple buttons or icons within a list item?

I have this html and would like all the buttons / icons (depending on which i can use) to line up horiztonally, but on the right, but currently they overlap

  <a class="item item-avatar item-button-right" href="#/score/{{ scorecard.id }}/{{ score.id }}">
      <img ng-if="score.isScored()" src="img/ok.png" />
      <img ng-if="!score.isScored()" src="img/help2.png" />
      <p>{{ score.name }}</p>

      <button ng-if="score.hasComments();" class="button button-icon button-clear ion-ios7-chatbubble"></button>
      <button ng-if="score.documents.length > 0" class="button button-icon button-clear ion-ios7-camera"></button>
      <button ng-if="score.actionDate != null" class="button button-icon button-clear ion-ios7-person"></button>

  </a>

#2

Yup, if you wrap all those buttons in a div with a class of buttons, they’ll all align correctly.

Note: I removed your logic in there just for simplicity.

          <a class="item item-avatar item-button-right" href="#/score/{{ scorecard.id }}/{{ score.id }}">
            <img src="http://placehold.it/100x100" />
            <p>score.name</p>
            <div class="buttons">
              <button  class="button button-icon button-clear icon ion-ios7-chatbubble"></button>
              <button  class="button button-icon button-clear icon ion-ios7-camera"></button>
              <button  class="button button-icon button-clear icon ion-ios7-person"></button>
            </div>
          </a>

#3

Right align multiple ICONS (on Ionic 1.0.0):

<ion-item class="item-icon-right"> 
        Status
        <div class="icon">
               <span class=" ion-ios-location"> </span>
               &nbsp;
               <span class=" ion-wifi"></span>
        </div>
</ion-item>