Laravel v5.2 分页显示

Question

我正在使用 Laravel v5.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>