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

I have an ionic item in an ionic list. What is the best way to left align the first text and right align the second text?

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

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

7 个解决方案

#1

This can be done using basic CSS properties. there is nothing specic about ionic here. This can be done using float:left and float:right properties.

这可以使用基本的CSS属性来实现。这里的离子没有什么特殊的。这可以使用float:left和float:right属性来实现。

Still for your reference, you can go through this link.

为了您的参考，您可以通过这个链接。

#2

In ionic 2 just use

在离子2中只使用。

text-left,text-right

text-left,text-right

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

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

#3

With Ionic 3 the above answers did not work. With ion-items you can simply leave the left text untouched because it is left-aligned by default. With the text that you want to right-align, simply use the item-end decorator like this:

对于Ionic 3，上面的答案是无效的。使用ion项，您可以简单地保留左文本，因为默认情况下它是左对齐的。对于要右对齐的文本，只需使用以下项目结束修饰符:

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

#4

You also use ionic's class and attribute to do that. For exemple

您还可以使用ionic的类和属性来实现这一点。为例

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

#5

With Ionic 2 & above, you can use Element Placement Attributes like float-left or float-right on your HTML elements instead of adding properties like float: left; or float: right; on your scss

在Ionic 2及以上版本中，您可以在HTML元素上使用元素放置属性(比如左对齐或右对齐)，而不用添加属性(比如左对齐);或浮动:正确的;在你scss

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

https://ionicframework.com/docs/theming/css-utilities/的浮动元素

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

#6

-1

you can use css "text-align" property to do that

您可以使用css“文本对齐”属性来实现这一点

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

Hope this fix your problem

希望这能解决你的问题

#7

-1

Ionic uses CSS Utilities. They provide their own way of aligning text.

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

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

More about CSS utilities at https://ionicframework.com/docs/theming/css-utilities/#text-alignment

有关CSS实用程序的更多信息，请参见https://ionicframework.com/docs/theming/css- applicties/ #文本对齐。

#1