Ионный элемент c выровненным по левому и правому краю текстом

У меня есть ионный элемент в ионном список. Каков наилучший способ выравнивания первого текста слева и выравнивания второго текста справа?

  <div class="item">
    <span>first</span>
    <span>second</span>
  </div>
10
css ionic ionic-framework

7 ответов

Это можно сделать с помощью основных свойств CSS. здесь нет ничего особенного об ионном. Это можно сделать с помощью float:left и float:right свойства.

по-прежнему для вашей справки, вы можете пройти через это ссылке.

16

в ionic 2 просто используйте

текст-слева,текст-справа

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

Подробнее :- https://github.com/driftyco/ionic/typography.scss

7

С Ionic 3 вышеуказанные ответы не работали. С Ion-items вы можете просто оставить левый текст нетронутым, потому что он выровнен по умолчанию. С текстом, который вы хотите выровнять, просто используйте декоратор конца элемента следующим образом:

<ion-item>
     Name <span item-end>Zack</span>
</ion-item>
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>
2

С Ionic 2 & выше, вы можете использовать Размещение Элемента атрибуты, такие как float-left или float-right на ваших HTML-элементах вместо добавления свойств, таких как float: left; или float: right; на вашем scss

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

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

вы можете использовать свойство 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>

надеюсь, что это исправит вашу проблему

-1

Ionic использует утилиты CSS. Они обеспечивают свой собственный способ выравнивания текста.

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

подробнее о CSS utilities at https://ionicframework.com/docs/theming/css-utilities/#text-alignment

-1