ion-col 中按钮的右对齐答案

【问题标题】：right alignment for a button in ion-colion-col 中按钮的右对齐
【发布时间】：2017-12-28 02:03:27
【问题描述】：

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

【问题讨论】：

标签： ionic-framework ionic2 ionic3

【解决方案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相同如果方向是从右到左，则为从左到右和向左浮动。

例子：

<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 用于 FAB

【讨论】：

效果很好。我正在尝试正确的项目，但它不起作用。你知道区别吗？
我不知道item-right 是否已经被使用了，我猜float-right 是它的替代品。在文档中找不到任何关于“item-right”的信息。
item-right 仅用于将元素放置在ion-item 中。因此，如果您想在项目内部放置一个按钮，或者如果您想将一个单选项目的图标放在右侧，您始终可以使用ion-item。但它不会在ion-item 之外工作。顺便说一句，感谢@robbannn 的float-right 属性，我根本不知道 :)
不客气！我在遇到的一些示例中看到了item-right，但我在文档中找不到任何关于它的信息。对于ion-item 内的水平定位，我找到了item-end、item-start 和item-content。
嗯，你说得对，我在文档中找不到它们了。我想这是 ionic 的新 RTL 支持功能的一部分，使用 start 和 end 而不是 absolute words 更有意义左和右 :/

【解决方案2】：

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

page.html:

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

page.scss：

.test {
    float: right;
}

【讨论】：