html - 无序列表间距

Question

我的 html 文档的页脚中有一个无序列表。列表的前两行包含社交媒体 Logo (img)。 包含列表元素的页脚有一个绿色背景，我选择了第一个两个列表项，图像，并给它们一个白色背景，以便它们在这个绿色“丝带”中脱颖而出。 问题是两张图片之间有一条绿色。我已经尝试将以下每个元素的填充和边距设置为零:img、a 和 li，但我无法摆脱这个 strip 。谁能告诉我我在这里忘记了什么？这是代码:

    <footer> 
        <ul class="navigation">
        <li><a href="facebook.com"><img src="images/facebooklogo.png" alt="facebook icon" /></a></li>
        <li><a href="#"><img src="images/gplus.png" alt="google plus icon" /></a></li>
        <li><a href="design.htm" >design</a></li>
        <li><a href="salvage.htm" >salvage</a></li>
        <li><a href="suigeneris.htm" >sui generis</a></li>
        <li><a href="flooring.htm" >flooring</a></li>
        <li><a href="paneling.htm" >paneling</a></li>
        <li><a href="beams.htm" >beams</a></li>
        <li><a href="reclaimedwood.htm" >reclaimed wood</a></li>
    </ul>

</footer>

和样式:

footer {
    width: 100%;
    background: #80A353;
    }

footer .navigation li a {
    color: white;
    }

footer .navigation li:first-child a, footer .navigation li:first-child + li a {
    background: white;
    display: block;
    }

footer .navigation {
margin-left: auto;
margin-right: auto;
width: 850px;
border: none;
}

footer img {
vertical-align: middle;
    }

Answer 1

丝带是一个空间。因为你使用了 display: inline-block; <li> 之间的空白的被呈现为普通空间。要删除它，您需要从 html 中删除空格。

参见 http://jsfiddle.net/MjRYt/3/