移动端实现 iphone android 小图标 文字排版
浏览数：22 /
时间：2015年06月11日
情景描述：
在手机浏览器中展示一些数据，这些数据前面都小图标，要求：小图标和文字水平对齐。
效果图
问题分析：
对于图文横排的问题，有很多的解决办法，但是究其根本还是将图片和文字放在同一行上进行展示。
实现方案：
方案一：
写法上很简单，但是这个的兼容性有很大问题。
.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手机则会有明显的对不齐的问题。
方案二：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
