html - 如何在输入字段旁边插入图像 - 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一个低于另一个。关于在这种情况下需要做什么的任何指示？

标签： htmlcss

Answer 1

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

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;
}