gpt4 book ai didi

css - 如何使用 CSS 实现分页按钮?

转载 作者:行者123 更新时间:2023-11-28 00:11:56 24 4
gpt4 key购买 nike

我有兴趣为我的数据表分页按钮提供样式,因为我在使用我购买的模板时遇到问题并且分页按钮没有显示,我真的厌倦了这个,我决定实现按钮的样式。

我想要这个: Image

有这样的风格: Image2

谁能分享给我数据表使用的 CSS?

我尝试实现它


.dataTables_paginate a {
padding: 6px 9px !important;
background: #54c5e6 !important;
border-color: #2196F3 !important;
}

但我只得到了这个结果:Image3

最佳答案

如果有人想知道,我使用这个 CSS 解决了我的问题:

        .pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px
}

.pagination > li {
display: inline
}

.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.428571429;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
background-color: #eee
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd
}

.pagination-lg > li > a,
.pagination-lg > li > span {
padding: 10px 16px;
font-size: 18px
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px
}

.pagination-sm > li > a,
.pagination-sm > li > span {
padding: 5px 10px;
font-size: 12px
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px
}


div.dataTables_paginate {
float: right;
margin: 0;
}

div.dataTables_paginate ul.pagination {
margin: 2px;
}

关于css - 如何使用 CSS 实现分页按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55346307/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com