无法将图标放入输入框内

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

您还没有显示所有代码，但是如果您从echo $this->Html->css('DebugKit.toolbar.css'); 删除所有样式，我可以看到它应该有效。这样它就可以与输入元素一起流动，并且应该将它自己定位在它旁边。换句话说，不要在这里使用#icon，因为绝对会从文档的正常流程中删除图标。所以从你的CSS中删除它：

position: absolute