左揃えと右揃えのテキストのイオニックアイテム

Question

イオンリストにイオンアイテムがあります。最初のテキストを左揃えにし、2番目のテキストを右揃えにする最良の方法は何ですか？

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

Answer 1

これは、基本的なCSSプロパティを使用して行うことができます。ここにイオン性については何も特別なものはない。これは、float:leftとfloat:rightのプロパティを使用して行うことができます。

まだ参考までに、linkをご覧ください。

Answer 2

また、ionicのクラスと属性を使用してこれを行います。イオン2では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

のためのちょうど続きを読む

テキスト左、テキスト、右

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

を使用： - https://github.com/driftyco/ionic/typography.scss

Answer 4

あなたはCSS「のテキストを使用することができます-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> 

ご希望の場合はこちら

Answer 5

IonicではCSSユーティリティを使用しています。テキストを整列する独自の方法を提供します。イオン3以上の答えとhttps://ionicframework.com/docs/theming/css-utilities/#text-alignment

Answer 6

で

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

CSSユーティリティについて

よりは動作しませんでした。イオンアイテムを使用すると、デフォルトで左揃えになっているため、左のテキストは変更しないでおくことができます。テキストを右揃えにするには、次のようにitem-endデコレータを使用します。

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