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>

这是我的小提琴：

Fiddle

我在这里面临两个问题。


我希望我的图片应该在输入标签的最后。现在，我正在手动使用CSS。你可以看到

#triggers {
      位置：绝对；
      左：110px;
      顶部：5px；
    }


我正在提供left : 110px如何始终在输入标签的末尾解决此问题。输入标签的宽度可能会改变。


我想在图像开始之前限制输入标签。目前，文字正下方出现在图片下方。甚至光标也在图像下方。任何想法如何解决。


这是供您参考的图像。


谢谢

最佳答案

第一个问题是：

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

以前是#container的现在是#chart_line，因此，如果将上述CSS更改为：

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

那应该做点什么。

下一个工作是将代码中的每个width: 30%;更改为width: 30vw;。

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

  padding: 0 55px 0 7px;

现在您需要做的就是从left: 110px中删除​​CSS #triggers并将其替换为right: 6px;

* {
  box-sizing: border-box;
}
#myInput {
  position: relative;
  border: 1px solid #95B8E7;
  background-color: #fff;
  height: 30px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0 55px 0 7px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
#chart_line {
  position: relative;
  width: 30vw;
}
#textfield {
  height: 30px;
  width: 100%;
}
.trigger {
  width: 20px;
}
#triggers {
  position: absolute;
  right: 6px;
  top: 5px;
}

<div id="chart_line">
  <input type="text" id="myInput" list="myUL" onclick="openingList()" onkeyup="openingList()" style="width:30vw;">
  <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>

CodePen

关于javascript - 如何在输入标签中正确放置图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44919551/