时间戳

首页 > 解决方案 > 如何将离子输入文本与侧面的其他元素对齐

html - 如何将离子输入文本与侧面的其他元素对齐

问题描述

我正在开发一个项目，我遇到了一个问题，其中包括占位符文本的离子输入文本略高于它旁边的文本。我需要帮助调整它们。

这是我的代码。

  <ion-item>
  <h4 item-left> UserName: </h4>
  <ion-input placeholder="UserName" class="ion-padding"></ion-input>
  </ion-item>

  <ion-item>
  <h4 item-left> Profile picture: </h4>
  <ion-input placeholder="Profile picture" class="input"></ion-input>
  </ion-item>

  <ion-item>
  <h4> E-mail: </h4>
  <ion-input placeholder= "Email" inputmode="email"type="email" class="input"></ion-input>
  </ion-item>

这是输出：

代码输出

标签： htmlcssangularionic-frameworkionic4

解决方案

在 Ionic 中对齐元素的官方推荐方法是使用自 ionic3 以来可用的实用程序 css 类。您将在此处找到文档：https ://ionicframework.com/docs/layout/css-utilities

例如，如果您想将离子输入向右对齐，您可以简单地执行以下操作：

 <ion-input class="ion-text-right"></ion-input>

请注意在您的 global.scss 文件中启用了实用程序，如下所述：https ://ionicframework.com/docs/layout/global-stylesheets

如果您使用的是旧版本的 Ionic (v2)，则必须使用 html 属性而不是 css 类

推荐阅读