Пользовательская пагинация django в CSS
Хотелось бы, чтобы кнопки пагинации имели небольшой промежуток между собой! Не так как сейчас :
Я не понимаю, как параметр display и justify работают вместе. Что я должен изменить в css, чтобы разделить их. Спасибо за помощь. Вот мой код :
html
<div class="pagination">
{% if files.has_previous %}
<a class="pagination-action" href="?page=1">
<i class='bx bx-chevrons-left' aria-hidden="true"></i> </a>
<a class="pagination-action" href="?page={{ files.previous_page_number }}">
<i class='bx bx-chevron-left' aria-hidden="true"></i>
</a>
{% endif %}
{% for num in files.paginator.page_range %}
{% if files.number == num %}
<span class="pagination-number pagination-current">{{ num }}</span>
{% elif num > files.number|add:'-3' and num < files.number|add:'3' %}
<a class="pagination-number" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if files.has_next %}
<a class="pagination-action" href="?page={{ files.next_page_number }}">
<i class='bx bx-chevron-right' aria-hidden="true"></i>
</a>
<a class="pagination-action" href="?page={{ files.paginator.num_pages }}">
<i class='bx bx-chevrons-right' aria-hidden="true"></i>
</a>
{% endif %}
</div>
css
.pagination {
display: flex;
margin-top: 15px;
align-items: center;
justify-content: center;
}
.pagination a {
text-decoration: none;
}
.pagination-number {
padding: 12px 17px;
border-radius: 2px;
color: #fff;
background-color: #6D85C7;
}
.pagination-number:hover,
.pagination-current {
background-color: #3354AA;
}
.pagination-action {
margin: 0 2px;
display: flex;
padding: 1px 2px;
color: #fff;
font-size: 1.3em;
align-items: center;
}
.pagination-action:hover,
.pagination-previous,
.pagination-next {
color: #3354AA;
}
Вы можете добавить пробел селектора .pagination-number(имя класса контейнера Number).
.pagination-number {
gap:10px;
}
Я изменил эту часть своего кода :
#customers .iconsColumn{
display: flex;
flex-direction: row;
justify-content : space-around;
}