ionic-framework - 将文本右对齐 Html Ionic

Question

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

我的代码是：

<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>

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

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