右 alignment 用于 ion-col 中的按钮

Question

I have this grid in my Ionic 2 application. Is there any ionic-specific attribute to make the button shown on the right side of the column (row)?

<ion-grid>
  <ion-row>
    <ion-col>col 1</ion-col>
    <ion-col>col 2</ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <button ion-button>My button</button>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

In your case you can add the attribute float-right like so:

<button ion-button float-right>My button</button>

float-{modifier}
The documentation says you can add the attribute float-{modifier} to position an element inside its container.

{modifier} can be any of the following:
right : The element will float on the right side of its container.
left : The element will float on the left side of its container.
start : The same as float-left if direction is left-to-right and float-right if direction is right-to-left.
end : The same as float-right if direction is left-to-right and float-left if direction is right-to-left.

Example:

<div>
    <button ion-button float-right>My button</button>
</div>

item-{modifier}
To position an element inside an ion-item the documentation says you can use item-{modifier} .

Where {modifier} can be any of the following:
start : Placed to the left of all other elements, outside of the inner item.
end : Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.
content : Placed to the right of any ion-label, inside of the input wrapper.

Example:

<ion-item>
    <button ion-button item-end>My button</button>
</ion-item>

Deprecation
According to the documentation these names are deprecated:

item-right & item-left

The new names are :

• item-start & item-end
• padding-start & padding-end
• margin-start & margin-end
• text-start & text-end
• start and end for FABs

Answer 2

The accepted solution didnt work for me. I think it is relevant to ionic v3 and not the current. I solved my problem like this:

page.html:

<div class="test">
    <ion-button>My button</ion-button>
</div>

page.scss:

.test {
    float: right;
}

Answer 3

I'm using ionic 6.18.2 where this works for me:

<ion-button class="ion-float-right">Button Text</ion-button>