Нежелательное пространство после первого элемента в строке
Я создаю список профилей, которые будут отображаться в зависимости от категории. Настройка делает неудобным использование элемента контейнера для обертывания элементов списка, поэтому я использую display:inline-flex для каждого элемента вместо гибкого контейнера с обычными justify-this и align-that.
Проблема в том, что у первого элемента в строке, кажется, есть пробел справа от него, и я не уверен, почему.
Я хотел бы отобразить все элементы равномерно, в данном случае 4 в ряд с одинаковым интервалом, без вложив их в родительский контейнер, если это возможно.
// simple function to repeat html elements
$(document).ready(function() {
let a = $('.a')[0];
const repeats = 11;
let count = 0;
while (count < repeats) {
$('body').append($(a).clone())
count++;
}
//$( 'body' ).append( html );
});.a {
background-color: red;
box-sizing: border-box;
border: 1px solid green;
display: inline-flex;
height: 25px;
width: 25%;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class = "a"></div>
</body>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Фактически теперь первый элемент (с пробелом справа) - это тот, который вы объявили в своем html. Удалите его оттуда и используйте вместо этого:
// simple function to repeat html elements
$(document).ready(function() {
let a = $('<div class = "a"></div>');
const repeats = 12;
let count = 0;
while (count < repeats) {
$('body').append($(a).clone())
count++;
}
//$( 'body' ).append( html );
});.a {
background-color: red;
box-sizing: border-box;
border: 1px solid green;
display: inline-flex;
height: 25px;
width: 25%;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
</body>
</html>Думаю проблема в том, что вы добавляете его в body. Ваш случай работает без изменений в html, если вы используете $ ('body'). Prepend ($ (a) .clone ()), и он должен отображаться, как ожидалось, когда вы добавляете узлы в элемент div
Взглянув на инспектор инструментов разработчика, вы обнаружите немного невидимого кода между первым и вторым элементами:
Когда я удаляю эти строки в инспекторе, промежуток удаляется, и все поля выстраиваются, как и предполагалось.
Так что это проблема с добавлением элементов вашего скрипта. Я не уверен, как вы хотите справиться с этим (например, сценарий только для этой демонстрации? Проблема только в этой среде IDE? Удаляет ли первый элемент вариант?), Поэтому я не буду вдаваться в решения.
что интересно, я получаю те же результаты даже без (насколько мне известно) скрипта между 1-м и 2-м элементами. Посмотрите на эту скрипку, где вместо добавления к телу (и, следовательно, ниже скрипта) я добавляю к контейнеру div: jsfiddle.net/45pmccm4
Чтобы ответить на ваши вопросы, сценарий был предназначен только для этой демонстрации. Первоначально проблема возникла при настройке браузера Notepad ++ и Chrome с использованием одного и того же сценария для создания нескольких элементов HTML. Удаление первого элемента не является вариантом в производстве, однако для целей этого макета, почему бы и нет. Мне кажется, я немного волновался, потому что думал, что делаю что-то не совсем правильное со своими флексбоксами, вместо того, чтобы столкнуться с случайной проблемой! Учитывая, что решение было «просто скопировать и вставить вместо использования сценария», я испытываю облегчение, но мне все еще интересно, почему это произошло в первом
ПОДОЖДИТЕ - это может быть: поскольку элементы являются display: INLINE-flex, пробел возникает из-за мешающего символа \n? Я заметил, что во время наведения указателя мыши был выделен персонаж, и в моем поиске перед публикацией были люди, которые страдали от этого явления (в целом, почему 4 * 25%! = 100% вещь) ....
Вы ссылаетесь не на проблема inline-flex. Сначала я попробовал решить эту проблему.
Ах да. Любопытно, что добавление float исправляет расположение ящиков, однако я не уверен, какие последствия это будет иметь для моего производственного кода (в конце концов, я отказался от родительского div - после всего этого!). Почему-то флоат все равно нежелателен, но я не могу сказать наверняка, почему. Может это почему!
Гоша, это любопытно! Я этого не ожидал - спасибо :)