0

这里的风格：

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>

如果您自己尝试，图像左侧有少量像素，这真的让我很生气。我已经尝试过 inline-block 并且它仍然存在。

任何帮助将不胜感激！

4

4 回答 4

3

你的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; }

希望这能解决您的问题。

于 2013-08-01T08:40:09.450 回答
1

试试下面的 JSFiddle

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

li { width:30.3%; float:left; background:#000; }
    li img { width:100%; }
于 2013-08-01T08:42:08.827 回答
1

替换此 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;到您的

于 2013-08-01T08:42:44.553 回答
0

也许尝试将<li>标签移到链接之外......

于 2013-08-01T08:40:43.817 回答