html - 将图像对齐输入框的左侧，将文本对齐到右侧

Question

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

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

Answer 1

give padding-left to input according to width of image

Answer 2

Why not to use padding ? Have a look:

padding-left: 65px;

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

Or text-indent :

text-indent: 65px;

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

Answer 3

use text-index property:

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.