使用InitTelInput时如何正确设置输入框的左内边距？

intl-tel-input 初始化后会自动为目标输入框外层生成嵌套容器结构，其中.iti__flag-container默认采用绝对定位固定在输入框左侧区域。你为该容器添加16px内边距后，容器整体宽度会同步增加，但你原有输入框设置的padding-left: 126px仅适配无额外内边距的容器宽度，输入内容的起始位置没有同步调整，自然就会出现国家选择器与输入内容重叠的问题。

方案一：同步调整输入框左内边距 #

为.iti__flag-container添加16px内边距后，对应将输入框的左内边距增加32px（内边距左右各16px），从原有的126px调整为158px即可：

.form__tel-input {
    position: relative;
    width: 100%;
    padding: 24.5px 24px 25.5px 158px;
    font-family: Lato;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 170%;
    background: #EEEEEE;
    border-radius: 10px;
}

.iti__flag-container {
  padding: 16px;
}

方案二：调整容器内部元素内边距（无需修改输入框原有样式） #

如果调整输入框内边距会影响其他业务逻辑，可放弃给.iti__flag-container加内边距，改为给容器内部的选中标识元素加内边距，内部元素的内边距不会撑大容器整体宽度，不会出现重叠问题：

.iti__selected-flag {
  padding: 16px;
}

优先推荐方案二，调整内部元素不会破坏库原有布局逻辑，后续库版本升级也不会出现样式兼容问题。

内容的提问来源于stack exchange，提问作者Ivan Stepin