1.一开始使用php的volist标签conding了这样一段代码：
<volist name="result[‘list‘]" id="temp"> ?????????<if condition="$temp.level eq 1 "> ?????????????<ul id="ul1"><img src="__PUBLIC__/img/{$temp.id}.jpg" width="100px" height="100px" ?> ?????????????????<a href="{$temp.link}">{$temp.name}</a></ul> ?????????</if> ???????</volist>2.css样式设置：
???????#ul1,#ul2{ ???????????padding-top:10px; ???????????vertical-align:middle; ???????????font-size: 50px; ???????} ???????a { ??????????????????????text-decoration: none; ???????????color:#333333; ???????????padding-left: 20px; ???????????padding-top: 15px;}3.发现虽然图片与超链接里的字体虽然同行显示了，但超链接里的字内边距无法生效，因为<a href></a>在这里不是作为块状元素，所以首先需要将a的css样式添加一个:display:block;属性，成为div元素。
4.接着我们会发现<a href>里的字体到图片下一行去了：
为了使两者同一行添加float属性：
#ul1,#ul2{ ???????????float:left; ???????????padding-top:10px; ???????????vertical-align:middle; ???????????font-size: 50px; ???????} ???????a { ???????????display:block; ???????????float:right; ???????????text-decoration: none; ???????????color:#333333; ???????????padding-left: 20px; ???????????padding-top: 15px; ???????}超链接字体生效！！
CSS<img>与<a href>字体同行显示方法与对齐
原文地址：https://www.cnblogs.com/carrier-sisi/p/8413830.html