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

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，因为 absolute 将从文档的正常流中删除图标。所以从你的 CSS 中删除它:

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