如何在文字右边加图标 css

Question

<a href='javascript:void(0);' id='prevPage'>prevPage</a> <div class='d2'></div>
div跟在a的后面 可是图片还是跑到prePage的前面去了
.d2 {
float: left;
width: 14px;
height: 14px;
margin: 0 0 0px 0px;
background: url('../images/img02.png') no-repeat;
background-position: -67px -262px;
}
如果不设置float 他们会在上下两行分别显示
如果设置display：inline 图片会消失 （所有内容所在页面是个大的div）

Answer 1

把<a>标签也放到一个div里，div加上float:left;，具体代码如下：

<style>
.d2 {
float: left;
width: 14px;
height: 14px;
margin: 0 0 0px 0px;
background: url('../images/img02.png') no-repeat;
background-position: -67px -262px;
}
    .d3{
        float:left;
        width:80px;
        margin:0px;
    }
</style>
<div class="d3"><a href='javascript:void(0);' id='prevPage'>prevPage</a></div> <div class='d2'></div>

Answer 2

　　在文字右边加图标，参考代码如下：
　　<input class='phone-input' type="text" id="phone"/>
　　.phone-input{
　　padding-right:20px;
　　background:url("resource/***.gif") no-repeat scroll right center transparent;
　　}

Answer 3

<div class='d2'><a href='javascript:void(0);' id='prevPage'>prevPage</a></div>
.d2 {
    width: 14px;
    height: 14px;
    margin: 0 0 0px 0px;
    background: url('../images/img02.png') right no-repeat;
    background-position: -67px -262px;
    padding-right:图标的宽度
}
或者：
<div class='d2'></div><a href='javascript:void(0);' id='prevPage'>prevPage</a> 
div跟在a的后面  可是图片还是跑到prePage的前面去了
.d2 {
    float: rigth;
    width: 14px;
    height: 14px;
    margin: 0 0 0px 0px;
    background: url('../images/img02.png') no-repeat;
    background-position: -67px -262px;
}
就可以了，把图标放在前面，然后让它右浮动，就可以了。