Html 离子项目标签存在问题

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

我遇到的问题是，当我使用离子项时，即使我更改了.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);
}

这个问题我已经解决了两天了，现在还不能解决

这是我的.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项标记

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

{{countryCode}
{{'login'| translate}

提前感谢：）

尝试使用

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

---

尝试使用

minwidth

和

maxwidth

它将解决您的问题

没有任何更改，我使用过！以前很重要，但还是得不到我想要的