jQuery перед добавлением элементов действуют странно

Question

Пожалуйста, перейдите к jsfiddle: here. Нажмите на последнее изображение с помощью знака «+», откроется всплывающее окно с кнопкой ADD, нажмите на него.

Проблема заключается в том, что я не могу понять, почему, если я добавляю несколько элементов (щелкая по ADD несколько раз, например 4-5 раз), расстояние между новыми элементами меньше расстояния между предопределенными элементы? Я использую для него тот же CSS, ту же структуру HTML.

Answer 1

Причина в том, что метки <li> имеют естественный интервал.

У вас есть несколько вариантов:

• Либо прекратить применение Li-теги и использовать что-то другое.
• <li> тег для каждой строки, как и должно быть.
• Изменение природного <li> поведение

li { display: table; }

Edit: Другой вариант, как уже упоминалось Флорин, является:

a { 
    float: left 
} 

Во всяком случае, это все о li поведении. Есть много способов решить эту проблему.

Answer 2

Вы используете встроенный блок для изображений.
Изображения - это макет с использованием display: inline-block.
В вашем коде HTML у вас есть пробелы между изображениями. Это пробел отображается на веб-сайте.
Программно добавленные изображения вставляются без пробелов между ними, поэтому они ближе друг к другу.

Проверить здесь стратегий против пробельных: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Я обнаружил, что если добавить в теги A:

a { 
    float:left; 
} 

будет удалить нежелательные пробелы.