Align Text Right Html Ionic

Question

I am trying to align text in Html, but it does not work, and I do not know why. I am using the Ionic Framework.

My code is:

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

and looks like this:

but I want all the text to be inside the same line, and I don't know how to get this.

Answer 1

Add css class as

.item {
    position: absolute;
    right: 0px;
    width: 300px;
    padding: 10px;
}

Answer 2

See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic elements, if you write text inside spanwith a class item-note, then it will be right-aligned. This is built into the class in ionic, your code will be like this:

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

, , .

Answer 3

The p tag creates a paragraph on a new line, so you need another element. You can use the span element that floats to the right:

Html:

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

Css:

.right {
  float: right;
}

Apply the box to all the elements that you want to be on the right.