Question

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

    <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/

无序列表间距

1 个答案: