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; }
超链接字体生效!!