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

【问题标题】：Align Image To Left Of Input Box & Text To The Right将图像对齐到输入框的左侧，将文本对齐到右侧
【发布时间】：2013-08-04 19:54:35
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

根据image的width将padding-left给input

【讨论】：

【解决方案2】：

为什么不使用 padding ？看看：

padding-left: 65px;

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

或text-indent：

text-indent: 65px;

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

【讨论】：

【解决方案3】：

使用文本索引属性：

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

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

【讨论】：