Итак, я пытаюсь создать перетаскиваемый список с React-Motion в моем проекте.
Однако я не смог найти способ убрать пробелы между списком (см. рисунок ниже). Я где-то читал, что это связано с природой абсолютных элементов в HTML.
// Here is a snippet of the CSS styles
// View the entire codes by clicking the link below
.demo8-item {
position: absolute;
width: 320px;
height: 40px;
overflow: visible;
pointer-events: auto;
transform-origin: 50% 50% 0px;
border-radius: 4px;
color: rgb(153, 153, 153);
line-height: 40px;
padding-left: 32px;
font-size: 24px;
font-weight: 400;
background-color: rgb(255, 255, 255);
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.demo8-outer {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
}
Я пытался проверить элементы HTML, чтобы найти преступника, но безрезультатно. Я не мог найти элемент, который вызывает те места; установка поля и отступа в 0 ничего не делает!
Мой вопрос заключается в том, есть ли способ удалить эти пробелы, не нарушая анимацию (т.е. преобразовав ее в inline-block и т. Д. c.)?
Спасибо.
![Spaces in between absolute content](https://i.stack.imgur.com/7HDAq.png?s=256)
Ссылка на песочницу