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

Question

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

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

Answer 1

这可以使用基本的CSS属性来完成。这里没有任何关于离子的特定信息。这可以使用float:left和float:right属性来完成。

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

Answer 2

在离子2中使用

文本左，文字的权利

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

阅读更多： - https://github.com/driftyco/ionic/typography.scss

Answer 3

使用Ionic 3，上述答案无效。使用离子项，您可以简单地保持左侧文本不变，因为默认情况下它是左对齐的。使用要右对齐的文本，只需使用item-end装饰器，如下所示：

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

Answer 4

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

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

Answer 5

使用Ionic 2及以上版本，您可以在HTML元素上使用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>

Answer 6

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

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

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

Answer 7

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

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

Answer 8

你可以使用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>

希望这可以解决您的问题