ion-item 标签的问题

Question

我正在登录页面，用户在该页面中选择国家代码，然后输入他的电话号码。 两个输入字段（代码、电话号码）在一行中

我遇到的问题是，当我使用 ion-item 时，即使我更改了 .scss 文件中的宽度，它也会平均分配两个输入字段之间的宽度

我在这个问题上已经 2 天了，还没有得到它。

这是我的 .scss 文件

ion-item{
    margin-top:170px;
    width: 100%;
}


.countryCode{
    width:20%;
    margin-right: 3px;
    border:none;
    border-bottom: 1px solid grey;
    background-color: rgba(255,255,255,0.0);
}

.phoneNumber{
    width: 50%;
    margin-left: 3px;
    border: none;
    border-bottom: 1px solid grey;
    background-color: rgba(255,255,255,0.0);
}

这是我的 HTML 文件 ion item 标记

<ion-list>
<ion-item>

  <ion-input class="countryCode" type="text" [(ngModel)]="countryCode" name="code" (tap)="openCountriescodePage()" placeholder="+">{{countryCode}}</ion-input>
  <ion-input class="phoneNumber" type="text" [(ngModel)]="phoneNumber" name="phoneNumber"></ion-input>

</ion-item>

<button margin-top ion-button full color="success" (click)="login()">{{'login' | translate}}</button>

提前致谢:)

Answer 1

尝试使用min-width 和max-width 会解决您的问题

Answer 2

尝试使用重要，

ion-item{
    margin-top:170px;
    width: 100%;
}


.countryCode{
    width:20%;
    margin-right: 3px !important;
    border:none;
    border-bottom: 1px solid grey;
    background-color: rgba(255,255,255,0.0);
}

.phoneNumber{
    width: 50%;
    margin-left: 3px !important;
    border: none;
    border-bottom: 1px solid grey;
    background-color: rgba(255,255,255,0.0);
}