Laravel v5.2分页显示器

Question

我使用LaravelV5.2，在显示记录时使用分页。分页工作很好，但我想在不使用引导的情况下以优雅的格式显示它，我无法知道如何做同样的事情。目前，分页链接如下(垂直)：

​

​

我已经尝试添加一些内联css，但这件事不起作用，除了定位相同的地方，我想。

<div style="position:absolute; top:300px; float:left;">{{$t->links()}}</div>

在页面加载后呈现的HTML：(用于分页)

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

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>

​