Список <ul><li> с отображением: нет;на себя и всех детей, все еще добавляет 3px padding к родителю <li> - PullRequest
Новая
       26

Список <ul><li> с отображением: нет;на себя и всех детей, все еще добавляет 3px padding к родителю <li>

0 голосов
/ 11 марта 2012

Итак, у меня есть стандартный вложенный ul li список внутри другого li , такой как: 

<li><a href="#">Link</a>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</li>

ul и все его дочерние элементы имеют display: block; , но, тем не менее, справа от родителя есть отступ с 3px li .

Вопрос проще всего представить, просто взглянув на него самостоятельно: ссылка

посмотрите на третью ссылку

Однако эта проблема исчезает, когда все пустое пространство удаляется из приведенного выше HTML-кода между закрытием самого верхнего тега привязки и самого нижнего закрывающего тега li .

Похоже, что это происходит в Chrome и Firefox, и я больше не тестировал, а вместо этого хотел спросить здесь, чтобы узнать, не хватает ли мне каких-то общих знаний, или это правильная ошибка.

1 Ответ

2 голосов
/ 11 марта 2012

Поскольку у вас display: inline; на ваших li s, пробелы / разрывы строк после элемента <a> в вашем третьем li отображаются в виде одного пробела.

Если вы float li с и оставите значение по умолчанию display: block;, вы получите тот же горизонтальный список без этого эффекта.

...