ionic-framework - テキストを右揃え Html Ionic

Question

Html でテキストを揃えようとしていますが、機能せず、理由がわかりません。私はイオンフレームワークを使用しています。

私のコードは次のとおりです。

<ion-list>
   <ion-item>
      <b>Name</b> <p align="right"> {{paciente.name}}</p>
   </ion-item>
   ....
</ion-list>

次のようになります。

しかし、すべてのテキストを同じ行に入れたいのですが、それを取得する方法がわかりません。

score 8 · Accepted Answer

このデモを参照してください: http://play.ionic.io/app/b477ea2f5623
ionic アイテムでは、クラス内spanにテキストを書き込むitem-noteと、右揃えになります。これは ionic によってクラスに組み込まれ、コードは次のようになります。これ：

<ion-item>
  <b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>

組み込みクラスによって提供されるイオンアイテムを使用したその他のトリックを参照してください。このドキュメントを参照してください

score 2 · Accepted Answer

p タグは新しい行に段落を作成するため、別の要素が必要です。右にフロートする span 要素を使用できます。

HTML:

<ion-list>
  <ion-item>
  <b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>

CSS:

.right {
  float: right;
}

右側に配置したいすべてのアイテムに ckass を適用します。

3 に答える 3