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