web-dev-qa-db-ja.com

Ionic左右に揃えられたテキストを持つアイテム

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

  <div class="item">
    <span>first</span>
    <span>second</span>
  </div>
cssionic-frameworkionic
11
user1283776

これは、基本的なCSSプロパティを使用して実行できます。 ionicここについては特に何もありません。これはfloat:leftおよびfloat:right プロパティ。

まだ参考のために、この link をご覧ください。

18
N-JOY

In ionic 2はただ使用する

text-left、text-right

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

続きを読む：- https://github.com/driftyco/ionic/typography.scss

7
aWebDeveloper

Ionic 3とすると、上記の答えは機能しませんでした。イオン項目を使用すると、デフォルトで左揃えになっているため、左のテキストをそのままにすることができます。 、次のようにアイテム終了デコレータを使用します。

<ion-item>
     Name <span item-end>Zack</span>
</ion-item>
5
Zachary Garcia

また、それを行うために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
bobo

Ionic 2以上）を使用すると、scssにfloat-leftやfloat-rightなどのプロパティを追加する代わりに、HTML要素にfloat: left;やfloat: right;などの属性を使用できますElement Placement

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

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

IonicはCSSユーティリティを使用します。それらは、テキストを整列する独自の方法を提供します。

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

https://ionicframework.com/docs/theming/css-utilities/#text-alignment にあるCSSユーティリティの詳細

0
YATO

Ionic 3を使用し、最良の答えは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>
0
Ari Waisberg