填充顶部在 ionic 3 中不起作用

Posted 2023-03-13

【中文标题】填充顶部在 ionic 3 中不起作用

【英文标题】：Padding top not working in ionic 3

【发布时间】：2018-05-04 10:53:54

【问题描述】：

以下是 ionic 页面的 html 代码。我正在尝试应用填充并调整内容的位置。在某些地方它不起作用。

我希望登录表单位于屏幕下方。更改 <div padding-top="100px"> 的值（代码中的第 10 行） 没有做任何事情。如何纠正这个问题？

登录.html

<ion-header>
 <ion-navbar color="primary">
  <div class="row">
   <ion-title>Login</ion-title>
  </div>
 </ion-navbar>
</ion-header>

<ion-content padding>
   <div padding-top="100px">
      <form [formGroup]="loginForm" (submit)="loginUser()" novalidate padding id="loginForm">
          <ion-item id="loginItem_1">
          <ion-label stacked id="loginLable">Email</ion-label>
          <ion-input #email formControlName="email" type="email" placeholder="Your email address"
    [class.invalid]="!loginForm.controls.email.valid &&
      loginForm.controls.email.dirty" color="secondary">
          </ion-input>
        </ion-item>
        <ion-item class="error-message" *ngIf="!loginForm.controls.email.valid  &&
  loginForm.controls.email.dirty" id="loginItem">
          <p id="loginLable">Please enter a valid email.</p>
</ion-item>

<ion-item id="loginItem_2">
  <ion-label stacked id="loginLable">Password</ion-label>
  <ion-input #password formControlName="password" type="password" placeholder="Your password" color="secondary">
  </ion-input>
</ion-item>

<button ion-button block type="submit" id="loginButton">
  Login
</button>
</form>
</div>

  <button ion-button block clear (click)="goToResetPassword()">
     I forgot my password 
  </button>

   <button ion-button block clear (click)="createAccount()">
     Create a new account
   </button>

</ion-content>

<ion-footer>
 <ion-toolbar color="primary">
  <ion-title>Created By</ion-title>
 </ion-toolbar>
</ion-footer>

查看

【问题讨论】：

padding-top 属性不接受任何内容，它默认为 16px 的填充，可以通过更改 $content-padding scss 属性来覆盖。 See here.

【参考方案1】：

不要使用inline styles。这是非常非常糟糕的。

你可以试试如下图。

page.html

 <div class="padding-top-100">

  </div>

page.scss

.padding-top-100 
   padding-top:100px;

【讨论】：

那么你可以使用!important

【参考方案2】：

内联 CSS 需要在 style HTML attribute 中定义，如下所示：

<div style="padding-top: 100px;">

没有“padding-top”属性，因此它什么也没做

我建议给该 div 一个 id / class 并使用 CSS 来定位它，这样更容易管理（默认情况下，Ionic 带有基本样式）

【讨论】：

您的内联 CSS 完美运行。但是在这里给出一个 id 然后写 css 是行不通的。我之前也试过。我不知道为什么。 。在 login.scss -> #loginDiv padding-top: 100px;

我认为这取决于您的项目设置及其所在位置，当您添加 CSS def 并检查时，您能在任何地方看到它吗？

我已经为子元素括号内的 div 编写了 CSS。问题解决了。谢谢。

Ionic 中其实有一个padding-top 属性。 See here

【参考方案3】：

试试这个：

<ion-content padding="true">

你可以在这个网站上看到例子：

http://ionicframework.com/getting-started