Таинственный интервал между элементами списка

Question

Таинственный интервал между элементами списка

0

Вот мой код: http://jsfiddle.net/spadez/FbADY/11/

Несмотря на то, что я использовал этот код:

 * {
    margin:0;
    padding:0;
}

Кажется, что между предметами есть пробел. В панели разработчика Google Chrome он говорит, что у них нет поля или отступов, чтобы вызвать его.

Jimmy 28 апр. 2014, в 15:09

Источник

Теги:

html

css

3 ответа

1

Потому что, если вы используете display: inline-block, он также будет содержать пробелы между li.

Либо удалите пробел между li или use float: left вместо display: inline-block.

См. Http://jsfiddle.net/sjroesink/FbADY/12/

sroes 28 апр. 2014, в 09:53

0

Это свойство display: inline-block, которое визуально отображает пробел в вашем источнике на лицевой стороне.

Если вы хотите сохранить свойство отображения встроенного блока, вы можете удалить пробелы в своем HTML, наделив все ваши элементы вместе, например:

   <ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>

Это не очень, но это решает проблему.

Вы также можете изучить использование display: table-cell для горизонтальной компоновки или использовать поплавки, как было предложено выше.

Nick Angiolillo 28 апр. 2014, в 12:31

Ещё вопросы

SW4 · Accepted Answer · 2014-04-28T10-14-00.000Z

Демо-скрипт

Это связано с тем, что элементы li отображаются в строке, и, таким образом, в вашем коде, когда каждый элемент встречается в новой строке, это выводится как пробел. Вы можете избежать этого, изменив свой CSS:

ul {
    font-size:0;
}

Это делает размер "ошибочного" пространства между элементами равным нулю, например, невидимым и, следовательно, не занимает места. Встроенные элементы интерпретируются как те же, что и текстовое содержимое, поэтому, когда в вашем коде вы их разделяете на новые строки и т.д., Это становится пространством. Другим решением было бы поместить элементы слева (float:left) или поместить все элементы li в одну строку в вашем HTML.

в северном направлении Скорее всего, вы захотите сбросить font-size на вашем li (например, 16px т.д.), Если вы перейдете с параметром размера выше.