Javascript 如何在输入标记中正确放置图像

我创建了一个带有两个十字和箭头的输入标记

这是我的密码

<div id="chart_line" style="position: relative;">
    <input type="text" id="myInput" list="myUL" onclick="openingList()" onkeyup="openingList()" style="width:30%;">
        <div id="triggers">
            <img class="trigger" onclick="deleteValue()" src="css/clearT.png" id="cross">
            <img class="trigger" src="css/combo_arrow.png" onclick="openingList()" id="arrow">
        </div>
</div>

这是我的小提琴：

我在这里面临两个问题

我希望我的图像应该在输入标签的末尾。现在我在CSS中手动提供。你可以看到

#触发{ 位置：绝对位置； 左：110像素； 顶部：5px； }

我正在给出

左：110px

如何在输入标记的末尾解决这个问题。输入标记宽度可能会更改

我想在图像开始之前限制我的输入标记。现在文本出现在图像下方。甚至光标也在图像下方。你知道怎么解决吗

这是你的参考图片。

---

谢谢

你需要在这里玩个把戏。您需要将

输入

和

imgs

放在

div

中，然后移除边框并正确设置组件样式，使其看起来自然。

这里有一个如何做的参考。

---

你需要在这里玩个把戏。您需要将

输入

和

imgs

放在

div

中，然后移除边框并正确设置组件样式，使其看起来自然。

这里有一个如何做的参考。

*{
框大小：边框框；
}
.场{
位置：相对位置；
宽度：300px；
}
.现场输入{
宽度：100%；
填充：5px 50px 5px 10px；
空白：nowrap；
空白：nowrap；
文本溢出：省略号；
}
.field.triggers{
位置：绝对位置；
顶部：5px；
右：5px；
}

*{
框大小：边框框；
}
.场{
位置：相对位置；
宽度：300px；
}
.现场输入{
宽度：100%；
填充：5px 50px 5px 10px；
空白：nowrap；
空白：nowrap；
文本溢出：省略号；
}
.field.triggers{
位置：绝对位置；
顶部：5px；
右：5px；
}

---

第一个问题是：

#container {
  position: relative;
  width: 30%;
}

以前的

#容器

现在是

#图表(行

)，因此如果您将上述CSS更改为此：

#chart_line {
  position: relative;
  width: 30%;
}

这应该会有所帮助

下一步工作是更改每个

宽度：30%在您的代码中至
宽度：30vw

然后您需要给
#myInput
一些填充：

  padding: 0 55px 0 7px;

现在，您只需从
#触发器中删除CSS
left:110px
，并将其替换为
right:6px


*{
框大小：边框框；
}
#我的输入{
位置：相对位置；
边框：1px实心#95B8E7；
背景色：#fff；
高度：30px；
垂直对齐：中间对齐；
显示：内联块；
溢出：隐藏；
空白：nowrap；
保证金：0；
填充：0 55px 0 7px；
-moz边界半径：5px 5px 5px 5px；
-webkit边界半径：5px 5px 5px 5px；
边界半径：5px 5px 5px；
}
#海图线{
位置：相对位置；
宽度：30vw；
}
#文本字段{
高度：30px；
宽度：100%；
}
.扳机{
宽度：20px；
}
#触发{
位置：绝对位置；
右：6px；
顶部：5px；
}
第一个问题是：

#container {
  position: relative;
  width: 30%;
}

以前的
#容器
现在是
#图表(行
)，因此如果您将上述CSS更改为此：

#chart_line {
  position: relative;
  width: 30%;
}

这应该会有所帮助

下一步工作是更改每个
宽度：30%在您的代码中至
宽度：30vw

然后您需要给
#myInput
一些填充：

  padding: 0 55px 0 7px;

现在，您只需从
#触发器中删除CSS
left:110px
，并将其替换为
right:6px


*{
框大小：边框框；
}
#我的输入{
位置：相对位置；
边框：1px实心#95B8E7；
背景色：#fff；
高度：30px；
垂直对齐：中间对齐；
显示：内联块；
溢出：隐藏；
空白：nowrap；
保证金：0；
填充：0 55px 0 7px；
-moz边界半径：5px 5px 5px 5px；
-webkit边界半径：5px 5px 5px 5px；
边界半径：5px 5px 5px；
}
#海图线{
位置：相对位置；
宽度：30vw；
}
#文本字段{
高度：30px；
宽度：100%；
}
.扳机{
宽度：20px；
}
#触发{
位置：绝对位置；
右：6px；
顶部：5px；
}
您需要将
位置：相对
添加到父div和
输入
和
触发器
添加
位置：绝对

然后将
width:100%
添加到输入中以取代父div，并将
right:5px
添加到触发器中以将其置于右侧

最后，在
输入中添加一些
填充
，以避免文本进入
触发器
图像

因此，类似这样的情况：


*{
框大小：边框框；
}
#海图线{
位置：相对位置；
宽度：30%；
}
#我的输入{
位置：绝对位置；
边框：1px实心#95B8E7；
高度：30px；
宽度：100%；
右边填充：50px；
}
#触发{
位置：绝对位置；
右：5px；
顶部：5px；
}
您需要将
位置：相对
添加到父div和
输入
和
触发器
添加
位置：绝对

然后将
width:100%
添加到输入中以取代父div，并将
right:5px
添加到触发器中以将其置于右侧

最后，在
输入中添加一些
填充
，以避免文本进入
触发器
图像

因此，类似这样的情况：


*{
框大小：边框框；
}
#海图线{
位置：相对位置；
宽度：30%；
}
#我的输入{
位置：绝对位置；
边框：1px实心#95B8E7；
高度：30px；
宽度：100%；
右边填充：50px；
}
#触发{
位置：绝对位置；
右：5px；
顶部：5px；
}

实际上我也试过同样的方法，但我有两张图片，所以背景图片技巧是n