如何减小包含输入的离子项的宽度

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

我也试过用左和右边距，但似乎右边距不适用。请帮助我，因为我是新的离子和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;
 }

Answer 2

试试这个..。

.item {
    min-width: 3rem; /* <- this can be whatever you need */
}

Answer 3

您可以使用默认的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; 
    }