html - 如何让图像显示在每个 上方

Question

我试图让图像显示在每个列表项的上方，这需要内联显示。我已经尝试增加 .ccs 上图像的填充，但它看起来不正确。任何建议都会很棒。

代码:http://jsfiddle.net/kcNa9/

这是 HTML:

<div id="frontpageproducts">
<ul>
    <li><a href="<%= url_prefix %>dac?no-upsell=1"><img src="img/front-page/application.png">Order Domains</a></li>        
    <li><a href="<%= url_prefix %>package-chooser?no-upsell=1"><img src="img/front-page/application.png">Order Web Hosting</a></li>      
    <li><a href="<%= url_prefix %>dedicated-servers?no-upsell=1"><img src="img/front-page/application.png">Order Servers</a></li>       
    <li><a href="<%= url_prefix %>vps?no-upsell=1"><img src="img/front-page/application.png">Order VPS</a></li>      
    <li><a href="<%= url_prefix %>add-ons?no-upsell=1"><img src="img/front-page/application.png">Order Add-ons</a></li>

</ul>
</div>

和 CSS:

#frontpageproducts li{
font-weight: 500;
font-style: normal;
display: inline;
font-size: 15px;
list-style: none;   

}

#frontpageproducts img{
display:inline-block;
padding-left: 30px; 
padding-bottom: 5px;
}

Answer 1

在图片后面添加br标签，制作li的内联 block

http://jsfiddle.net/kcNa9/4/

图片居中

http://jsfiddle.net/kcNa9/9/

编辑

正如许多人所说(我确实在评论中注意到了这一点)，给图像 display:block 确实将其撞到自己的行上。这意味着您不需要 br 标签。