Ionisches Element mit links- und rechtsbündigem Text

Question

Ich habe ein ionisches Element in einer ionischen Liste. Was ist der beste Weg, um den ersten Text links auszurichten und den zweiten Text richtig auszurichten?

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

Answer 1

Dies kann mit grundlegenden CSS-Eigenschaften erfolgen. hier ist nichts Spezielles an Ionen. Dies kann unter Verwendung der Eigenschaften float:left und float:right geschehen.

Noch für Ihre Referenz können Sie durch diese link gehen.

Answer 2

Sie verwenden auch die Klasse und das Attribut von ionic, um das zu tun. Für exemple

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

Answer 3

In ionischen 2 nur

Text-Links verwenden, Text rechts

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

Lesen Sie weiter: - https://github.com/driftyco/ionic/typography.scss

Answer 4

Sie CSS verwenden können „text -align "-Eigenschaft, um das zu tun

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

Hoffe dies beheben Sie Ihr Problem

Answer 5

Ionic verwendet CSS-Dienstprogramme. Sie bieten ihre eigene Art, Text auszurichten.

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

Mehr über CSS-Dienstprogramme bei https://ionicframework.com/docs/theming/css-utilities/#text-alignment

Answer 6

Mit Ionic 3 die oben genannten Antworten hat nicht funktioniert. Mit ion-items können Sie den linken Text einfach unberührt lassen, da er standardmäßig linksbündig ist. Mit dem Text, den Sie rechts ausrichten möchten, verwenden Sie einfach den Objekt-Ende Dekorateur wie folgt:

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