ion-col 中按钮的右对齐

Question

我的 Ionic 2 应用程序中有这个网格。是否有任何特定于离子的属性使按钮显示在列（行）的右侧？

<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

在您的情况下，您可以像这样添加属性 float-right：

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

float-{修饰符}
documentation 表示您可以添加属性 float-{modifier} 以将元素定位在其容器内。

{modifier} 可以是以下任何一项：
right: 元素将浮动在其容器的右侧。
left: 元素将浮动在其容器的左侧。
start：如果方向是从左到右，则与 float-left 相同；如果方向是从右到左，则与 float-right 相同。
end：如果方向是从左到右，则与 float-right 相同；如果方向是从右到左，则与 float-left 相同。

示例：

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

item-{修饰符}
要将元素定位在 ion-item 中，documentation 表示您可以使用 item-{modifier}.

其中 {modifier} 可以是以下任何一项：
start：放置在所有其他元素的左侧，在内部项之外。
end：放置在所有其他元素的右侧，在内部项内部，在输入包装器外部。
content：放置在输入包装器内部的任何离子标签的右侧。

示例：

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

弃用
根据 documentation 这些名称已弃用：

item-right & item-left

新名称是：

item-start & item-end
padding-start & padding-end
margin-start & margin-end
text-start & text-end
start 和 end

Answer 2

接受的解决方案对我不起作用。我认为它与 ionic v3 有关，而不是当前的。我这样解决了我的问题：

page.html:

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

page.scss:

.test {
    float: right;
}

Answer 3

我正在使用适合我的 ionic 6.18.2：

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

ion-col 中按钮的右对齐

right alignment for a button in ion-col

ionic-framework

ionic2

ionic3