Angular输入框内嵌清除按钮后文本被遮挡的问题求助

问题分析 #

你通过负margin将清除按钮嵌入输入框，但输入框未给按钮预留右侧空间，导致文本末尾被遮挡；同时输入框宽度设为135%容易超出容器，布局稳定性差。

修复方案 #

通过调整输入框内边距、使用绝对定位固定按钮位置，解决布局冲突：

修改后的HTML代码

<ng-template pTemplate="input">
    <div style="position: relative; display: inline-block; width: 100%;">
        <input pInputText type="text" class="col-input-grid-100">
        <button (click)="clearmail1(ri)" class="clear-btn">
            <i class="pi pi-times"></i>
        </button>
    </div>                         
</ng-template>

修改后的CSS代码

.col-input-grid-100{
    width: 100%;
    padding-right: 35px; /* 给清除按钮预留右侧空间 */
    box-sizing: border-box; /* 确保padding不会增加输入框总宽度 */
    margin-left: 0; /* 移除不必要的负margin */
}

.clear-btn{
    border: none;
    outline: none;
    position: absolute;
    right: 8px; /* 控制按钮与输入框右侧的间距 */
    top: 50%;
    transform: translateY(-50%); /* 让按钮垂直居中 */
    background-color: transparent;
    cursor: pointer;
}

改动说明 #

• 给输入框套一个相对定位的容器，让按钮的绝对定位基于该容器，避免影响其他元素
• 输入框设置padding-right，确保文本不会进入按钮区域
• 用box-sizing: border-box保证输入框宽度不会因padding变大而超出容器
• 按钮改用绝对定位垂直居中，替代负margin，布局更稳定且不易冲突

修改后，输入框文本可完整显示，清除按钮也能固定在输入框内右侧，不再遮挡内容。

内容的提问来源于stack exchange，提问作者Bhushan Khaladkar