CSS3 通过背景图实现 伸缩布局及应用

*{
    margin: 0;
    padding: 0;
}

ul{
    /*overflow: hidden;*/
    line-height: 30px;
    list-style: none;
}
li{
    float: left;
    margin: 0 20px;
}
a{
    background: url(./tlm.png) no-repeat;
    display: block;
    padding-left: 10px;

}
span{
    display: block;
    background: url(./tlm.png) no-repeat;
    background-position: top right;
    padding-right: 10px;
}

<ul class="clearfix">
    <li>
        <a href="javascript:;">
            <span>首页</span>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <span>首页</span>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <span>首页44444444</span>
        </a>
    </li>
</ul>