Question

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

这是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的内嵌块

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

图像居中

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

修改

正如许多人所说的那样（我在评论中注意到了这一点），图像display:block确实在它自己的线上碰撞。这意味着您不需要br标签。

Answer 2

有很多方法可以实现这一目标。我在这里http://jsfiddle.net/kcNa9/14/所做的是为你的CSS中的img和次要编辑提供display:block。

Answer 3

您应该display:inline-block li然后，您可以将img设为block：http://jsfiddle.net/kcNa9/15/

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

    }
#frontpageproducts img{
    display:block;
    margin:auto;
    }

Answer 4

将父div宽度设置为100%，并将width的{{1}}设置为ul。然后将95%的{{1}}设置为width，这样只会有两个连续出现。

请参阅下面的小提琴链接

http://jsfiddle.net/abhishekverma3189/N6G83/

如何在每个<li> </li>上方显示图像

4 个答案: