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

Question

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

• <ul>占据包含元素的整个宽度
• 每个<li>占宽度的 25%<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

图像是内联框并且位于基线上（默认值：）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;;
}

Answer 2

您必须设置display:block;图像和lis 以避免它们之间的丑陋内联边距。看看这个工作的 jsFiddle

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

.container ul li{ display:block; }