情景描述：
在手机浏览器中展示一些数据，这些数据前面都小图标，要求：小图标和文字水平对齐。
效果图
问题分析：
对于图文横排的问题，有很多的解决办法，但是究其根本还是将图片和文字放在同一行上进行展示。
实现方案：
方案一：
写法上很简单，但是这个的兼容性有很大问题。
.m-icon{
display:inline-block;
vertical-align:middle;
padding-right:1em;
height:1em;
background-image:url(icon.png);
background-size:1em;
background-repeat:no-repeat;
}
.m-icon.star{
background-position:npx npx;
}
.m-icon.like{
background-position:npx npx;
}
.m-icon.share{
background-position:npx npx;
}
.m-text{
display:inline-block;
vertical-align:middle;
font-size:1em;
}
<i class="m-icon star"></i><span></span> <i class="m-icon like"></i><span></span> <i class="m-icon share"></i><span></span>
tip:这种写法非常简单，利用css3的inline-block属性便可以实现对齐，但是这个在android手机显示比较好，iphone手机则会有明显的对不齐的问题。
方案二：
时间： 2024-11-08 22:34:46