<style> .pagination { text-align: center; } .pagination a, .pagination .page-disabled { display: inline-block; border: solid 1px #6a7ddd; border-radius: 3px; padding: 5px; margin: 3px; } .pagination a { background: #6a7ddd; color: white; text-decoration: none; } .pagination a:hover { background: #6a7dff; text-decoration: underline; } .pagination .page-disabled { background: #6a7dcc; color: #dddddd } .pagination .current-page { display: inline-block; } .pagination .current-page input { width: 50px; padding: 5px 7px; font-size: inherit; border-radius: 5px; text-align: center; border: solid 1px gray; } </style> <div class="pagination"> <span class="step-links"> <a href="?page=1">« В начало</a> {% if page_obj.has_previous %} <a href="?page={{ page_obj.previous_page_number }}">Назад</a> {% else %} <span class="page-disabled">Назад</span> {% endif %} <form class="current-page" method="get"> <label for="page"> Страница <input type="text" name="page" id="page" value="{{ page_obj.number }}"> из {{ page_obj.paginator.num_pages }}. </label> </form> {% if page_obj.has_next %} <a href="?page={{ page_obj.next_page_number }}">Далее</a> {% else %} <span class="page-disabled">Далее</span> {% endif %} <a href="?page={{ page_obj.paginator.num_pages }}">В конец »</a> </span> </div>