Question

我正在尝试设置无序列表中包含的一组图像，以便：

<ul>占据包含元素的整个宽度
每个<li>占据<ul>
<li>比例中包含的图像按比例调整屏幕大小
8个总图像排列成两行，每行4个图像
图像之间没有垂直或水平间隙

我可以完成上面列表中的前四个目标，但似乎无法消除第一行和第二行图像之间的差距。

这是标记：

<div class="container">  
    <ul>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
    </ul>
</div>

和（重置后）CSS：

.container { 
    width: 90%
    max-width: 960px;
    margin: 6em auto;
}
.container ul {
    float: left;
    display: block;
    width: 25%;
    height: auto;
}
.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
}

提前感谢您提供的任何帮助。

干杯，大卫

Answer 1

您必须在图片和display:block;上设置li，以避免它们之间存在难看的内联边距。看看这个working jsFiddle

.container img { 
    display:block;
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
}

.container ul li{ display:block; }

Answer 2

图像是内嵌框并且位于基线上（defaut值：vertical-align:baseline;）。这解释了下面的差距。你可以解决它：

.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
    vertical-align:top;
}

或

.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
    vertical-align:bottom;
}

或将你的内联盒子变成块盒

.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
    display:block;;
}

如何设置列表项的样式以包含图像而它们之间没有任何间隙？

2 个答案: