将图像对齐到输入框的左侧＆amp;文字向右

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

根据padding-left的{​​{1}}将input提供给width

Answer 2

为什么不使用padding？看看：

padding-left: 65px;

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

或text-indent：

text-indent: 65px;

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

Answer 3

使用text-index属性：

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

或者您也可以使用padding-left:10px;创建与图片的距离。