目前，如果您在第一页或最后一页，我的分页会稍微改变其对齐方式。当您转到其余页面时，分页位于按钮“下一步”和“返回”之间的中心，仅在这种情况下出现。如果您在第一页，则只有“下一步”按钮；当你在最后一页时，只有“后退”按钮。在这两种情况下，我的分页都停留在这些离开中心位置的按钮上。
这是我的 HTML:
<template>
<nav v-if="pagination.total_pages > 1" class="text-center g-mt-5">
<ul class="list-inline">
<li v-if="!pagination.first_page" class="list-inline-item float-sm-left">
<router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-16"
:to="getLinkToPreviousPage()">
<i class="fa fa-angle-left g-mr-5"></i>
Back
</router-link>
</li>
<li class="list-inline-item g-hidden-sm-down"
v-if="pagination.current_page > (2)">
<router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
:to="getLinkToPage(1)">1</router-link>
</li>
<li class="list-inline-item g-hidden-sm-down"
v-if="pagination.total_pages > 3 && pagination.current_page > 3">
<span class="g-pa-7-14">...</span>
</li>
<li class="list-inline-item g-hidden-sm-down"
v-if="!!pagination.prev_page">
<router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
:to="getLinkToPage(pagination.prev_page)">
{{ pagination.prev_page }}
</router-link>
</li>
<li class="list-inline-item g-hidden-sm-down">
<a class="u-pagination-v1__item u-pagination-v1-4 u-pagination-v1-4--active g-rounded-50 g-pa-7-14"
href="javascript: void(0);">
{{ pagination.current_page }}
</a>
</li>
<li class="list-inline-item g-hidden-sm-down"
v-if="!!pagination.next_page">
<router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
:to="getLinkToPage(pagination.next_page)">
{{ pagination.next_page }}
</router-link>
</li>
<li class="list-inline-item g-hidden-sm-down"
v-if="pagination.current_page < (pagination.total_pages - 2)">
<span class="g-pa-7-14">...</span>
</li>
<li class="list-inline-item g-hidden-sm-down"
v-if="pagination.current_page < (pagination.total_pages - 1)">
<router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
:to="getLinkToPage(pagination.total_pages)">
{{ pagination.total_pages }}
</router-link>
</li>
<li v-if="!pagination.last_page"
class="list-inline-item float-sm-right">
<router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-16"
:to="getLinkToNextPage()">
Next
<i class="fa fa-angle-right g-ml-5"></i>
</router-link>
</li>
</ul>
</nav>
</template>
这是 CSS:
/*------------------------------------
Paginations
------------------------------------*/
/* Pagination v1 */
.u-pagination-v1__item {
display: inline-block;
text-align: center;
text-decoration: none;
border: solid 1px transparent;
transition: all .3s ease;
}
.u-pagination-v1__item--active, .u-pagination-v1__item:hover, .u-pagination-v1__item:focus {
text-decoration: none;
cursor: pointer;
}
.u-pagination-v1__item-info {
display: inline-block;
text-align: center;
text-decoration: none;
}
.u-pagination-v1__item--disabled {
opacity: .5;
pointer-events: none;
}
/* Pagination Style v1 */
.u-pagination-v1-1 {
color: #999;
border-color: #999;
}
.u-pagination-v1-1--active, .u-pagination-v1-1:hover, .u-pagination-v1-1:focus {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}
/* Pagination Style v2 */
.u-pagination-v1-2 {
color: #555;
border-color: #555;
}
.u-pagination-v1-2:hover, .u-pagination-v1-2:focus {
color: #0cbb67;
border-color: #0cbb67;
}
.u-pagination-v1-2--active, .u-pagination-v1-2--nav {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}
.u-pagination-v1-2--active:hover, .u-pagination-v1-2--active:focus, .u-pagination-v1-2--nav:hover, .u-pagination-v1-2--nav:focus {
color: #fff;
}
.u-pagination-v1-2--nav:hover {
background-color: rgba(114, 192, 44, 0.8);
}
/* Pagination Style v3 */
.u-pagination-v1-3 {
color: #333;
border-color: #333;
}
.u-pagination-v1-3--active, .u-pagination-v1-3:hover, .u-pagination-v1-3:focus {
background-color: #333;
color: #fff;
border-color: #333;
}
/* Pagination Style v4 */
.u-pagination-v1-4 {
color: #333;
border-color: transparent;
}
.u-pagination-v1-4:hover, .u-pagination-v1-4:focus {
color: #0cbb67;
border-color: #0cbb67;
}
.u-pagination-v1-4--active {
color: #fff;
background-color: #0cbb67;
border-color: #0cbb67;
}
.u-pagination-v1-4--active:hover, .u-pagination-v1-4--active:focus {
color: #fff;
}
/* Pagination Style v5 */
.u-pagination-v1-5 {
color: #999;
border-color: #ccc;
}
.u-pagination-v1-5--active, .u-pagination-v1-5:hover, .u-pagination-v1-5:focus {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}
是否有任何 CSS 技巧可以使我的分页独立于导航按钮而保持在中心位置？
截图:
最佳答案
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body, html { margin:0; padding:0;}
.boxmain { width:100%; padding:0 20px; overflow:hidden;}
.box { display:inline-block; vertical-align:top; width:31.1%; margin:0 1%; height:100px; background:#f1f1f1;}
.pagination { overflow:hidden; text-align:center; padding:0; position:relative; margin:20px 40px;}
.pagination .navlink { position:absolute; top:0;}
.pagination .nextlink { right:0;}
.pagination .prevlink { left:0;}
.midbox { display:inline-block; vertical-align:top;}
.midbox a { display:block; width:30px; height:30px; color:#000; text-align:center; border-radius:100%; float:left; text-decoration:none;}<div class="boxmain">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="pagination">
<div class="navlink prevlink">Prev</div>
<div class="midbox">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<div class="navlink nextlink">Next</div>
</div>
<div class="pagination">
<div class="navlink prevlink" style="display:none;">Prev</div>
<div class="midbox">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<div class="navlink nextlink">Next</div>
</div>
<div class="pagination">
<div class="navlink prevlink">Prev</div>
<div class="midbox">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<div class="navlink nextlink" style="display:none;">Next</div>
</div>关于html - 使分页保持在页面的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48638896/