右对齐文本 Html Ionic

Question

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

我的代码是：

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

它看起来像这样：

但我希望所有文本都在同一行，但我不知道如何实现。

Answer 1

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 应用到您希望位于右侧的所有项目。

Answer 2

添加一个 css class 作为

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

Answer 3

查看此演示：http://play.ionic.io/app/b477ea2f5623
在 ionic 项中，如果你在 span 中使用 item-note class 编写任何文本，那么它将对齐到 right.This 是由 ionic 在 class 中构建的，你的代码将是这样的：

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

查看内置 classes 提供的离子物品的更多技巧，请参阅此 Documentation

Align text right Html Ionic