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

你也可以使用离子的类和属性来做到这一点。例如

<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＆amp;上面，您可以在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，我认为最好的答案是使用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>

Answer 8

你可以使用css＆＃34; text-align＆＃34;这样做的财产

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

希望这可以解决您的问题

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

8 个答案: