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

【问题标题】：How to decrease width of the ion-item which contains input如何减小包含输入的离子项的宽度
【发布时间】：2018-05-09 02:07:08
【问题描述】：

我想减小项目/输入的宽度。但我不知道该怎么做！

这是代码。

<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 的新手。

编辑

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

【问题讨论】：

rounded-corners 也有 Css Right 。 ?
您可以添加一个屏幕截图来看看它现在的样子并解释更多您想要实现的目标吗？
max-width，也许？
@عارفبنالأزرق 请检查我已编辑问题

标签： html css ionic3

【解决方案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;
 }

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个..

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

【讨论】：

问题是关于宽度，而不是关于高度。