CSS 带有左右对齐文本的离子项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33802395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic item with left and right aligned text
提问by user1283776
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>
回答by N-JOY
回答by aWebDeveloper
In ionic 2 just use
在离子 2 中只需使用
text-left,text-right
文字左，文字右
<div class="item">
<span text-left>first</span>
<span text-right>second</span>
</div>
Read More :- https://github.com/driftyco/ionic/typography.scss
回答by Zachary Garcia
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-items 您可以简单地保持左侧文本不变，因为默认情况下它是左对齐的。对于要右对齐的文本，只需像这样使用 item-end 装饰器：
<ion-item>
Name <span item-end>Zack</span>
</ion-item>
回答by Sudharshan
With Ionic 2 & above, you can use Element PlacementAttributes like float-leftor float-righton your HTML elements instead of adding properties like float: left;or float: right;on your scss
使用 Ionic 2 及更高版本，您可以像或在 HTML 元素上使用元素放置属性，而不是像或在 scss 上添加属性float-leftfloat-rightfloat: left;float: right;
https://ionicframework.com/docs/theming/css-utilities/#float-elements
https://ionicframework.com/docs/theming/css-utilities/#float-elements
<div class="item">
<span float-left>first</span>
<span float-right>second</span>
</div>
回答by bobo
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>
回答by Ari Waisberg
I use Ionic 3 and the best anwser I think is to use the ionic tags and attributes:
我使用 Ionic 3，我认为最好的 anwser 是使用 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>
回答by YATO
Ionic uses CSS Utilities. They provide their own way of aligning text.
Ionic 使用 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-utilities/#text-alignment
回答by Vishnu Kumar Soni
you can use css "text-align" property to do that
你可以使用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>
Hope this fix your problem
希望这能解决你的问题
