如何在输入字段旁边插入图像 - HTML? [英] How to insert a image next to an input field - HTML?

问题描述

我正在尝试在输入框旁边插入图像.这是我在做什么:

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

基本上，

.iconCamera {背景: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') 不重复；宽度:50px；高度:50px；}

<div><input type="text" placeholder="产品密钥"><div class="iconCamera"></div>

既然我已经给出了 inline-block，那么这两个组件应该并排显示 - 在一行中 对吗?

但目前有 stacked 一个低于另一个.关于在这种情况下需要做什么的任何指示?

解决方案

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

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

.iconCamera {背景: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') 不重复；宽度:50px；高度:50px；显示:内联块；}

I am trying to insert an image next to an input box. Here's what I am doing:

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

Basically,

.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>

Since, I've given the inline-block, the two components should be displayed side by side - in one line right ?

But currently there are stacked one below other. Any pointers on what needs to be done on this case?

解决方案

Use display: inline-block in the css specification.

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

这篇关于如何在输入字段旁边插入图像 - HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！