实际开发中应用
在实际开发中,经常会出现 img + span标签这样的组合,但是往往两者不能很好的兼容。
<div class="application_information" style="margin-top: 20px; height: 100px; float:left; width:1600px;">
<ul class="tab">
<li><img src="${rc.contextPath}/images/first.jpg"/><span style="color: #fd0c08;">1.地上客户0001</span></li>
</ul>
</div>
问题:图标和文字没有平行显示,出现一些偏差。
解决方案
解决方法一:使用 vertical-align: middle;
解决方法二: 使用 display: inline-block; (此属性我使用没生效,网上查看说是这个属性也可以的。)
<div class="application_information" style="margin-top: 20px; height: 100px; float:left; width:1600px;">
<ul class="tab">
<li><img src="${rc.contextPath}/images/first.jpg"/><span style="color: #fd0c08; vertical-align: middle;">1.地上客户0001</span></li>
</ul>
</div>