将图像对齐输入框左侧和文本右侧

I have aligned the image to the left of the input box but the writing is overlapping the image. How do I get around this? The image has been aligned to the left just fine, I just need the input text to be aligned to the right of the image now instead of overlapping

我已将图像对齐到输入框的左侧,但写入与图像重叠。我该如何解决这个问题?图像已经对齐到左边就好了,我只需要将输入文本对齐到图像的右边,而不是重叠

CSS
input {
background: url(../../core/images/search.png) no-repeat center left 5px #FFF;
text-align: left;
padding: 5px;
font-family: 'Raleway', sans-serif;
color: #444;
border: 3px solid #FFF;
outline: none;
border-radius: 3px;
margin: -4px 20px;
position: absolute;
width: 270px;
}

HTML
<input type="text" autocomplete="off" name="name">

3 个解决方案

#1

give padding-left to input according to width of image

根据图像的宽度给出填充左侧输入

#2

Why not to use padding ? Have a look:

为什么不使用填充?看一看:

padding-left: 65px;

JSFiddle: http://jsfiddle.net/8JLXj/9/

Or text-indent :

JSFiddle:http://jsfiddle.net/8JLXj/9/或文字缩进:

text-indent: 65px;

JSFiddle: http://jsfiddle.net/8JLXj/10/

#3

use text-index property:

使用text-index属性:

text-index:(pic\'s width+gap between pics and first letter)px;

or you can also use padding-left:10px; to create the distance from pic.

或者你也可以使用padding-left:10px;从pic创建距离。

#1