html中图片和文字显示在一行，并且交叉显示的style设置

在开发中遇到了一个问题，需要一个小图标和图标的说明文字，放在一行显示。

弄了半天，终于弄出来了。大致的设置如下：

在html中，图片和文字的设置如下：

                <div>
                    <img src="green_1.png" class="fl sp-icon-list" alt="绿色">
                    <span class="fl">通过 </span>
                    <img src="red_1.png" class="fl sp-icon-list" alt="红色">
                    <span class="fl">驳回 </span>
                    <img src="blue_1.png" class="fl sp-icon-list" alt="蓝色">
                    <span class="fl">待审批 </span>
                </div>

在css中，风格的设置如下：

.sp-icon-list
{
    width:16px;
    height:16px;
    vertical-align:middle;
    padding-right:2px;
    margin:0px;
}

.fl {
    float: left;
    display: inline;
}

当然两个风格可以写在一起。fl部分的设置是最重要的保证文字和图片不换行。

最后的显示状态如下图：