Ionique de l'élément à gauche et à droite du texte aligné

J'ai un ionique de l'élément dans un ioniques liste. Quel est le meilleur moyen pour aligner à gauche le premier texte et le droit d'aligner le deuxième texte?

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

OriginalL'auteur user1283776 | 2015-11-19

  1. 18

    Cela peut être fait en utilisant les propriétés CSS. il n'y a rien de spécique sur ionique ici. Cela peut être fait en utilisant float:left et float:right propriétés.

    Encore pour votre référence, vous pouvez passer à travers cette lien.

    Génial! Je joins les changements que j'ai fait alors que d'autres qui trouvent ce post peut le trouver. J'ai ajouté à mon document CSS: .alignleft { float: left; } .alignright { float: right; } puis changé mon code HTML à ce <div class="item"> <span class="alignleft">premier</span> <span class="alignright">deuxième</span> </div>
    Heureux, il a aidé. :).

    OriginalL'auteur

  2. 7

    Ionique dans les 2 utilisez juste

    texte à gauche,le texte à droite

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

    En Savoir Plus :-
    https://github.com/driftyco/ionic/typography.scss

    OriginalL'auteur

  3. 4

    Avec Ionique 3 les réponses ci-dessus ne fonctionne pas. Avec les ions des éléments que vous pouvez simplement laisser le texte de gauche à intacte parce qu'il est aligné à gauche par défaut. Avec le texte que vous souhaitez pour aligner à droite, il suffit d'utiliser l'élément de fin d'décorateur, comme ceci:

    <ion-item>
     Name <span item-end>Zack</span>
</ion-item>
    pour ionique 3. autre exemple n'est pas de travail ionique dans les 3

    OriginalL'auteur

  4. 2

    Vous pouvez également utiliser ionique de classes et d'attributs pour le faire. Par exemple

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

    OriginalL'auteur

  5. 1

    Avec Ionique 2 & ci-dessus, vous pouvez utiliser Élément Placement Attributs comme float-left ou float-right sur vos éléments HTML au lieu d'ajouter des propriétés comme float: left; ou float: right; sur votre scss

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

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

    OriginalL'auteur

  6. -1

    vous pouvez utiliser css "text-align" propriété de le faire

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

    Espère que cela résoudre votre problème

    OriginalL'auteur