CSS 数据表分页按钮 - 删除不需要的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28955336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables pagination buttons - Remove unwanted space
提问by Darkstarone
Currently my pagination looks as such:
目前我的分页如下：
I'm trying to work out how to remove the space between the buttons, but have been unsuccessful. In the css files the only references I can find to pagination are:
我正在尝试解决如何消除按钮之间的空间，但没有成功。在 css 文件中，我能找到的对分页的唯一引用是：
jquery.dataTables.css (319 - 394):
jquery.dataTables.css (319 - 394):
}
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #333333 !important;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
/* IE10+ */
background: -o-linear-gradient(top, white 0%, gainsboro 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, white 0%, gainsboro 100%);
/* W3C */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
/*.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid white;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
/* IE10+ */
background: -o-linear-gradient(top, #585858 0%, #111111 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #585858 0%, #111111 100%);
/* W3C */
} */
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
background-color: #2b2b2b;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* IE10+ */
background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
/* W3C */
box-shadow: inset 0 0 3px #111;
}
dataTables.bootstrap.css (32 - 50):
数据表.bootstrap.css (32 - 50):
div.dataTables_paginate {
margin: 0;
white-space: nowrap;
text-align: right;
}
div.dataTables_paginate ul.pagination {
margin: 2px 0;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
div.dataTables_length,
div.dataTables_filter,
div.dataTables_info,
div.dataTables_paginate {
text-align: center;
}
}
However, I can't seem to find a reference to any large margins or padding. Although CSS isn't exactly my strong suit.
但是，我似乎找不到对任何大边距或填充的引用。尽管 CSS 并不是我的强项。
Does anyone know if there are other references to the paginate buttons that might be related? Or have to fix the problem outright?
有谁知道是否还有其他可能相关的分页按钮的引用？还是必须彻底解决问题？
回答by Bae
This issue has already been noted in their bug database. You do not need to hack the css.
这个问题已经在他们的错误数据库中注意到了。你不需要破解css。
bootstrap pagination looks bad #39
No need to include DataTables' own stylesheet (jquery.dataTables.css) since Bootstrap and the integration file provide everything that is needed.
无需包含 DataTables 自己的样式表 (jquery.dataTables.css)，因为 Bootstrap 和集成文件提供了所需的一切。
So just delete jquery.dataTables.css, and keep dataTables.bootstrap.min.cssin your html style sheets.
所以只需删除jquery.dataTables.css，并保留dataTables.bootstrap.min.css在您的 html 样式表中。
回答by davidkonrad
Oh yes. Easy to reproduce the error. To solve it, add this CSS after other CSS references :
哦是的。容易重现错误。要解决它，请在其他 CSS 引用之后添加此 CSS：
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding : 0px;
margin-left: 0px;
display: inline;
border: 0px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 0px;
}
demo -> http://jsfiddle.net/s6c35ogt/
Try to comment out the added CSS in the top right corner, and you will see the exact same behaviour as you describe.
演示 -> http://jsfiddle.net/s6c35ogt/
尝试在右上角注释掉添加的 CSS，您将看到与您描述的完全相同的行为。
