在开发中遇到了一个问题，需要一个小图标和图标的说明文字，放在一行显示。
弄了半天，终于弄出来了。大致的设置如下：
在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部分的设置是最重要的保证文字和图片不换行。
最后的显示状态如下图：
