我想减少项目/输入的宽度。但我不知道该怎么做!
这是代码。
<form #loginForm="ngForm" autocomplete="off">
<ion-item color="calm" class="fields rounded-corners">
<ion-icon name="person" item-left color="light"></ion-icon>
<ion-input placeholder="Email" name="username" id="loginField" type="text" [(ngModel)]="username" #email>
</ion-input>
</ion-item>
<ion-item color="calm" class="fields rounded-corners">
<ion-icon name="lock" item-left color="light"></ion-icon>
<ion-input placeholder="Password" name="password" id="passwordField" type="password" [(ngModel)]="password">
</ion-input>
</ion-item>
<ion-row>
<ion-col text-center>
<div *ngIf="error" class="alert alert-danger">{{error}}</div>
<button ion-button class="submit-btn rounded-corners" text-center text-Capitalize type="submit">Login
</button>
</ion-col>
</ion-row>
</form>
和CSS:
.fields{
margin-top: 15px;
margin-bottom: 15px;
// margin-left: 15px;
// margin-right: 15px;
}
我也尝试过使用左右边距,但似乎右边距不是以某种方式应用。请帮助我,因为我是离子和Html / css的新手。
修改
如图所示,电子邮件和密码输入具有全屏宽度。我想减少电子邮件和密码输入的宽度。
答案 0 :(得分:1)
我使用最大宽度解决了它。
我添加的是max-width: 80% !important;
然后是2行,只将它放在中心位置。
margin-left: auto;
margin-right: auto;
所以最后,它变成了
.fields{
margin-top: 15px;
margin-bottom: 15px;
max-width: 80% !important;
margin-left: auto;
margin-right: auto;
}
答案 1 :(得分:0)
试试这个..
.item {
min-width: 3rem; /* <- this can be whatever you need */
}
答案 2 :(得分:0)
您可以使用默认的css / scss类将效果应用于<ion-input>
例如:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="container">
<ion-list>
<ion-item id="rounded">
<ion-label fixed>Username</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
并在scss文件中添加以下样式
#rounded {
width: 50%; // as per your requirement
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 10px;
margin-bottom: 10px;
}
#container {
width: 300px;
margin-left:auto;
margin-right: auto;
}