1

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

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

3 回答 3

1

give padding-left to input according to width of image

于 2013-08-04T11:53:50.027 回答
1

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/

于 2013-08-04T11:53:51.727 回答
1

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.

于 2013-08-04T11:54:35.497 回答