具有左右对齐文本的离子项目答案

【问题标题】：Ionic item with left and right aligned text具有左右对齐文本的离子项目
【发布时间】：2016-02-21 12:10:22
【问题描述】：

我在离子列表中有一个离子项目。左对齐第一个文本和右对齐第二个文本的最佳方法是什么？

  <div class="item">
    <span>first</span>
    <span>second</span>
  </div>

【问题讨论】：

标签： css ionic-framework ionic

【解决方案1】：

这可以使用基本的 CSS 属性来完成。这里没有什么关于离子的特别之处。这可以使用float:left 和float:right 属性来完成。

仍然供你参考，你可以通过这个link。

【讨论】：

太棒了！我附上了我所做的更改，以便找到此帖子的其他人可以找到它。我将此添加到我的 CSS 文档中： .alignleft { float: left; } .alignright { 浮动：对； } 然后将我的 HTML 更改为此
first second

【解决方案2】：

您还可以使用 ionic 的类和属性来执行此操作。例如

<div class="item row">
   <span align="right" class="col col-50">first</span>
   <span align="left" class="col col-50">second</span>
</div>

【讨论】：

【解决方案3】：

在 ionic 2 中只需使用

文本左，文本右

<div class="item">
    <span text-left>first</span>
    <span text-right>second</span>
</div>

【讨论】：

它在 ionic 4 中被移除了吗？

【解决方案4】：

您可以使用 css "text-align" 属性来做到这一点

<div class="item row">
  <span style="text-align:right" class="col col-50">first</span>
  <span style="text-align:left" class="col col-50">second</span>
</div>

希望这能解决您的问题

【讨论】：

【解决方案5】：

Ionic 使用 CSS 实用程序。它们提供了自己的文本对齐方式。

<div class="item">
  <span>first</span>
  <span>second</span>
</div>

更多关于 CSS 实用程序的信息，请访问https://ionicframework.com/docs/theming/css-utilities/#text-alignment

【讨论】：

【解决方案6】：

对于 Ionic 3，上述答案不起作用。使用 ion-items，您可以简单地保持左侧文本不变，因为默认情况下它是左对齐的。对于要右对齐的文本，只需像这样使用 item-end 装饰器：

<ion-item>
     Name <span item-end>Zack</span>
</ion-item>

【讨论】：

对于离子 3。其他示例在离子 3 中不起作用

【解决方案7】：

使用 Ionic 2 及更高版本，您可以在 HTML 元素上使用 Element Placement 属性，例如 float-left 或 float-right，而不是在 scss 上添加 float: left; 或 float: right; 等属性

https://ionicframework.com/docs/theming/css-utilities/#float-elements

<div class="item">
  <span float-left>first</span>
  <span float-right>second</span>
</div>

【讨论】：

【解决方案8】：

我使用 Ionic 3，我认为最好的答案是使用 ionic 标签和属性：

<ion-list>
  <ion-item>
    <ion-label>
      this to the left
    </ion-label>
    <ion-label text-right>
      this to the right
    </ion-label>
  </ion-item>
</ion-list>

【讨论】：