html - 如何减少包含输入的 ionic 元素的宽度

Question

我想减少元素/输入的宽度。但我不知道该怎么做!

这是代码。

<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;
 }

我也尝试过使用左右边距，但似乎右边距不适用。请帮助我，因为我是 ionic 和 Html/css 的新手。

编辑

如图所示，电子邮件和密码输入具有全屏宽度。我想减少电子邮件和密码输入的宽度。

Answer 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;
 }