在Angular中，我在输入框中添加了清除按钮，但添加后我无法看到输入框中的整个文本，因为它被重叠。请在下面找到详细信息。

• • HTML代码**

<ng-template pTemplate="input">
    <input pInputText type="text" class="col-input-grid-100" >
    <span class="mar-left">
        <button (click)="clearmail1(ri)" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
            <i class="pi pi-times"></i>
        </button>
    </span>                           
</ng-template>

• • CSS内容**

.col-input-grid-100{
      width: 135%;
      margin-left: -10px;
  }

.mar-left{
    margin-left:-29px;
  }

• • 电流输出：输入框中的文本为test3@test.com。**

正如你可以看到在上面的图片**"com"**是不可见的清晰。我尝试了多种方法，但事情没有工作。请帮助我解决这个问题。

• • 注：**
• • 1.我只想在输入框内显示十字按钮**
• • 2.我没有使用引导库。**