将文字右对齐Html Ionic

Question

我正在尝试在Html中对齐文本，但它不起作用，我不知道为什么。我正在使用Ionic Framework。

我的代码是：

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

它看起来像这样：

但是我希望所有文本都在同一行，我不知道如何获得它。

Answer 1

请参阅此演示：http://play.ionic.io/app/b477ea2f5623
在离子项中，如果你在span中使用item-note类写任何文本，那么它将对齐到右边。这是按类离子构建的，你的代码将是这样的：

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

查看内置类提供的离子项的更多技巧，请参阅此Documentation

Answer 2

将CSS课程添加为

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

Answer 3

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应用于您想要在右侧的所有项目。