Laravel v5.2分页显示

Question

我正在使用Laravel v5.2并在显示记录时使用的是分页。分页工作正常，但我希望以优雅的格式显示它而不使用bootstrap，我无法弄清楚如何做同样的事情。目前，分页链接如下（垂直）：

我试图添加一些内联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样式，但这应该可以让您入门。

这一切都在一起：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;