将图标放入输入框时遇到问题

Question

我在输入框内（左侧）添加此图标时遇到问题。 到目前为止，我已经拥有了它，看起来好像它在盒子里，这正是我想要的。 我遇到的问题是，当我在其中键入内容时，文本位于图标顶部。 我怎样才能解决这个问题？ 我尝试在其右侧添加填充，但无法正常工作...

.wrapper{
  position: relative;
}

#icon {
  position: absolute;
  top: 10px;
  left: 75px;
}

.inputBox {
  padding: 6px 6px 6px 9px !important;
}


    <div class="wrapper">
          <i id="icon" class="uk-icon-credit-card uk-icon-small"></i>
          <input style="width: 250px;" class="uk-form-large uk-text-center inputBox" type="text" name="cardNumber" placeholder="Card Number">
    </div>

Answer 1

您还没有显示所有代码，但是从我可以看出，如果您从#icon删除了所有样式，它应该可以工作。 这样，它会与输入元素内联，并应将其自身放置在其旁边。 换句话说，请不要使用position: absolute ，因为绝对值将从文档的正常流程中删除该图标。 因此，将其从CSS中删除：

#icon {
  position: absolute;
  top: 10px;
  left: 75px;
}