неупорядоченный список интервалов - PullRequest
Новая
       20

неупорядоченный список интервалов

0 голосов
/ 11 января 2012

У меня есть неупорядоченный список в нижнем колонтитуле моего документа HTML. Первые две строки списка содержат логотипы социальных сетей (img). Нижний колонтитул, содержащий элемент списка, имеет зеленый фон, и я выбрал первые два элемента списка, изображения, и дал им белый фон, чтобы они выделялись на этой зеленой «ленте». Проблема в том, что между двумя изображениями есть полоска зеленого цвета. Я попытался установить отступы и поля в ноль для каждого из следующих элементов: 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;
    }

1 Ответ

1 голос
/ 11 января 2012

Лента - это пробел. Потому что вы используете display: inline-block; пробел между <li> отображается как обычный пробел. Чтобы удалить это, вам нужно удалить пробел из html.

См. http://jsfiddle.net/MjRYt/3/

...