Ionic 4 / Angular-验证突出显示超出了本机输入字段

Question

将用户输入添加到设置宽度的输入形式时，下划线会超出输入范围。

给出以下代码：

    <ion-list lines="none">
      <ion-item>
         <ion-label color="medium" position="floating">Username</ion-label>
         <ion-input type="text" formControlName="username" autocomplete="username"></ion-input>
              </ion-item>
            <ion-text
                color="danger"
                [hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched"
              >
                <span padding>Valid email is required</span>
            </ion-text>
            <ion-item>
              <ion-label color="medium" position="floating">Password</ion-label>
              <ion-input type="password" formControlName="password" autocomplete="current-password"></ion-input>
            </ion-item>
            <ion-text
                color="danger"
                [hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched"
              >
                <span padding translate>Password is required</span>
            </ion-text>
            <a href="/login/forgot" class="forgot-password ion-float-right">
                [Forgot Your Password?]
            </a>
         </ion-list>

另外，当我切换到一个字段时，INPUT会覆盖整个离子项目字段，而不是离子输入字段，如下所示：

我已经尝试过对CSS进行各种更改，但均未取得成功。通过检查器，我可以通过将--inset-padding-end变量更改为0来解决此问题，但是我还没有找到如何全局更改/设置该变量的方法？

有没有人知道的快速解决方案？当离子列表设置为“插图”时，此错误看起来特别糟糕，如下所示：

Answer 1

它与输入表单的固定宽度无关。请将 css 属性设置ion-item --padding-start为0

    ion-item {
     --padding-start: 0;
    }

ion-item还有其他与填充相关的自定义 css 属性，您可以使用它们来获得任何所需的效果。