以下是离子页面的html代码。我正在尝试应用填充并调整内容的位置。在某些地方它不起作用。
我希望登录表单位于屏幕的下方。更改<div padding-top="100px">
的值(代码中的第10行)
没有做任何事情。如何纠正这个?
的login.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>
查看
答案 0 :(得分:2)
内联CSS需要在style HTML attribute中定义,如下所示:
pipe()
没有&#34; padding-top&#34;归因于它为什么没有做任何事情
我建议给这个div一个id / class,然后使用CSS定位它,使其更容易管理(Ionic默认带有基本样式)
答案 1 :(得分:2)
答案 2 :(得分:2)
不要使用inline styles
。哪个非常糟糕。
您可以尝试如下所示。
page.html中
<div class="padding-top-100">
</div>
page.scss
.padding-top-100 {
padding-top:100px;
}