将文本右对齐 Html Ionic答案

【问题标题】：Align text right Html Ionic将文本右对齐 Html Ionic
【发布时间】：2015-12-10 12:46:09
【问题描述】：

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

我的代码是：

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

它看起来像这样：

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

【问题讨论】：

【解决方案1】：

查看此演示：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>

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

【讨论】：

【解决方案2】：

添加一个css类

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

【讨论】：

【解决方案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 应用到您想要在右侧的所有项目。

【讨论】：