Html 如何防止文本显示在搜索图标后面

为了自学，我试图建立一个搜索字段，但我正在试验两个问题

一,。 当文本过长时，它将显示在搜索图标后面。 我如何防止这种情况

二,。 为什么即使我添加了

right:0，图标和右边框之间仍有空格

相关代码：

.search i{
position: absolute;    
top:50%;
right:0;
transform: translateY(-50%);
font-size: 35px;
color: dimgray;
background-color:green;
}


。搜索容器{
显示器：flex；
宽度：70%；
}
.搜索{
宽度：100%；
位置：相对位置；
}
.搜索输入{
高度：50px；
填充：4px 0 4px 30px；
字体大小：20px；
}
.搜索一{
位置：绝对位置；
最高：50%；
右：0；
转化：translateY（-50%）；
字体大小：35px；
颜色：浅灰色；
}

名称-1
姓名-2
姓名-3
姓名-4
姓名-5
姓名-6
姓名-7
来自：


。搜索框{
背景：url（“http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
背景尺寸：20px 20px；
背景重复：无重复；
背景位置：右；
右边填充：20px！重要；
填充顶部：2件！重要；
填充底部：2px！重要；
左侧填充：5px！重要；
浮动：左；
}
来自：


。搜索框{
背景：url（“http://png-5.findicons.com/files/icons/980/yuuminco/256/search.png");
背景尺寸：20px 20px；
背景重复：无重复；
背景位置：右；
右边填充：20px！重要；
填充顶部：2件！重要；
填充底部：2px！重要；
左侧填充：5px！重要；
浮动：左；
}

您可以在输入中添加右
填充
，并将
框大小设置为
边框框

存在一个空格，因为图标不是相对于输入放置在右侧，而是相对于
放置在右侧，因为它是其第一个定位（非静态）的祖先元素。如果你用浏览器检查它，你的图标就是这个
div
结束的地方


以下是固定代码段：


。搜索容器{
显示器：flex；
宽度：70%；
}
.搜索{
宽度：100%；
位置：相对位置；
}
.搜索输入{
高度：50px；
填充：4px50px 4px30px；
字体大小：20px；
框大小：边框框；
}
.搜索一{
位置：绝对位置；
最高：50%；
右：10px；
转化：translateY（-50%）；
字体大小：35px；
颜色：浅灰色；
}

名称-1
姓名-2
姓名-3
姓名-4
姓名-5
姓名-6
姓名-7

您可以在输入中添加右
填充
，并将
框大小设置为
边框框

存在一个空格，因为图标不是相对于输入放置在右侧，而是相对于
放置在右侧，因为它是其第一个定位（非静态）的祖先元素。如果你用浏览器检查它，你的图标就是这个
div
结束的地方


以下是固定代码段：


。搜索容器{
显示器：flex；
宽度：70%；
}
.搜索{
宽度：100%；
位置：相对位置；
}
.搜索输入{
高度：50px；
填充：4px50px 4px30px；
字体大小：20px；
框大小：边框框；
}
.搜索一{
位置：绝对位置；
最高：50%；
右：10px；
转化：translateY（-50%）；
字体大小：35px；
颜色：浅灰色；
}

名称-1
姓名-2
姓名-3
姓名-4
姓名-5
姓名-6
姓名-7
这是您修改过的代码，我相信它达到了您的要求。
我已从搜索输入中删除了一个
搜索
类，因为父节点具有相同的类


。搜索容器{
显示器：flex；
宽度：70%；
}
.搜索{
宽度：100%；
位置：相对位置；
显示器：flex；
弯曲方向：行；
边框：1px纯黑；
}
.搜索：关注内部{
轮廓宽度：1px；
轮廓颜色：rgb（166200255）；
轮廓样式：实心；
}
.搜索输入{
高度：50px；
宽度：90%；
填充：4px 0 4px 30px；
字体大小：20px；
边界：无；
大纲：无；
}
.搜索一{
显示器：flex；
宽度：10%；
证明内容：中心；
对齐项目：居中；
字体大小：35px；
填充：0.5em 0.5em；
颜色：浅灰色；
}

名称-1
姓名-2
姓名-3
姓名-4
姓名-5
姓名-6
姓名-7
这是您修改过的代码，我相信它达到了您的要求。
我已从搜索输入中删除了一个
搜索
类，因为父节点具有相同的类


。搜索容器{
显示器：flex；
宽度：70%；
}
.搜索{
宽度：100%；
位置：相对位置；
显示器：flex；
弯曲方向：行；
边框：1px纯黑；
}
.搜索：关注内部{
轮廓宽度：1px；
轮廓颜色：rgb（166200255）；
轮廓样式：实心；
}
.搜索输入{
高度：50px；
宽度：90%；
填充：4px 0 4px 30px；
字号：20p