Laravel v5.2, нумерация страниц

Question

Я использую Laravel v5.2 и при отображении записей я использую нумерацию страниц.Нумерация страниц работает нормально, но я хочу отобразить это в элегантном формате без использования начальной загрузки, я не могу понять, как сделать то же самое.В настоящее время ссылки на страницы разбиты на страницы (по вертикали):

Я попытался добавить несколько встроенных CSS, но это не работает, за исключениемпозиционирование там, где я хочу

Answer 1

Laravel помещает класс pagination в список, и это облегчает нацеливание на CSS.Вы будете использовать три важных селектора: .pagination, .pagination li и .pagination a.Они касаются самого списка, элементов и ссылок внутри элементов.

Давайте начнем с некоторого базового стиля.

.pagination {
  list-style: none;
  padding-left: 0;
}

Это удалит маркеры из всех элементов спискаи некоторые отступы, которые обычно присутствуют по умолчанию.

Далее, мы делаем все части одной строкой:

.pagination li {
  display: inline-block;
}

Это довольно хорошо, но они переполнены, так чтодавайте разберем их:

.pagination li + li {
  margin-left: 1rem;
}

Это предназначается для каждого элемента списка, у которого есть предыдущий элемент списка и помещает пространство слева.

Теперь, я предполагаю, что будет приличноШирокое горизонтальное пространство, в котором находится эта нумерация страниц. Чтобы сделать вещи центрированными, добавьте text-align: center к .pagination.

В этом его основы.Если вы не хотите, чтобы ссылки выглядели как простые ссылки, вы можете связываться с .pagination a:

.pagination a {
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  color: red;
  border: 1px solid red;
  border-radius: 2px;
}

Возможно, вы захотите сделать некоторые :hover, :focus и :active стиль, но это должно помочь вам начать.

Здесь все вместе:

.pagination {
  list-style: none;
  padding-left: 0;
  text-align: center;
}

.pagination li {
  display: inline-block;
}

.pagination li+li {
  margin-left: 1rem;
}

.pagination a {
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  color: red;
  border: 1px solid red;
  border-radius: 2px;
}

<div style="position:absolute; width: 300px; top:300px; float:left;">
  <ul class="pagination">
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    <li><a href="localhost/laravel-7/blog/public/t?page=2">2</a></li>
    <li><a href="localhost/laravel-7/blog/public/t?page=3">3</a></li>
    <li><a href="localhost/laravel-7/blog/public/t?page=2" ; rel="next">&raquo;</a></li>
  </ul>
</div>