如何在输入字段旁边插入图像 - HTML？

Question

我正在尝试在输入框旁边插入图像。 这就是我在做的事情：

http://jsfiddle.net/a4aME/2307/

基本上，

.iconCamera {
  background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
  width: 50px;
  height: 50px;
}

<div class="A" style="display:inline-block">
  <div>
    <input type="text" placeholder="Product Key">
    <div class="iconCamera"></div>
  </div>
</div>

由于我已经给出inline-block，因此应该显示两个组件side by side - in one line对吗？

但目前还有stacked一个低于其他人。关于在这种情况下需要做什么的任何指针？

Answer 1

在css规范中使用display: inline-block。

http://jsfiddle.net/a4aME/2310/

.iconCamera {
    background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
    width:50px;
    height:50px;
    display: inline-block;
}