Question

这是风格：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
th, td { margin: 0; padding: 0; border: 0; outline: none; list-style: none; }

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}       
li { 
    width: 30.3%; 
    margin: 10px 1% 10px 1%; 
    padding: 0.5%; 
    float: left; 
    background: #000; 
}
li img { width:100%; }

这是html：

<a href=""><li><img src="/images/test.png" /></li></a>
<a href=""><li><img src="/images/test.png" /></li></a>
<a href=""><li><img src="/images/test.png" /></li></a>
<a href=""><li><img src="/images/test.png" /></li></a>
<a href=""><li><img src="/images/test.png" /></li></a>
<a href=""><li><img src="/images/test.png" /></li></a>

如果您自己尝试一下，图像左侧会有少量像素，这真的让我感到沮丧。我已经尝试了内联块，它仍然在那里。

任何帮助将不胜感激！

Answer 1

你的html结构应该是

<ul>
<li><a href=""><img src="/images/test.png" /></a></li>
<li><a href=""><img src="/images/test.png" /></a></li>
<li><a href=""><img src="/images/test.png" /></a></li>
<li><a href=""><img src="/images/test.png" /></a></li>
<li><a href=""><img src="/images/test.png" /></a></li>
<li><a href=""><img src="/images/test.png" /></a></li>
</ul>

并在css中添加以下内容

li img { width:100%; display:block; }

希望这能解决您的问题。

Answer 2

尝试以下JSFiddle

http://jsfiddle.net/arunberti/8GUUw/

li { width:30.3%; float:left; background:#000; }
    li img { width:100%; }

Answer 3

替换此html标记

<a href=""><li><img src="/images/test.png" /></li></a>

有了这个

<li><a href=""><img src="/images/test.png" /></a></li>

并将display: block;应用于您的图片，并将display: inline-block;添加到您的

Answer 4

也许可以尝试在链接之外移动<li>标签...

锚内的图像会导致错位

4 个答案: