JQuery 数据表分页样式答案

【问题标题】：JQuery Datatable Pagination StylingJQuery 数据表分页样式
【发布时间】：2017-08-12 18:57:11
【问题描述】：

我有一个 Jquery Datatable 的分页 UI 问题。下面是分页按钮在 Chrome 和 IE 中的屏幕截图。我正在使用引导程序，如果我删除 ui-button 类，一切看起来都不错

Pagination Screenshot and below is the HTML

 <ul class="pagination">
        <li class="fg-button ui-button ui-state-default first disabled" id="Data_first"><a href="#" aria-controls="Data" data-dt-idx="0" tabindex="0">First</a></li>
        <li class="fg-button ui-button ui-state-default previous disabled" id="Data_previous"><a href="#" aria-controls="Data" data-dt-idx="1" tabindex="0">Previous</a></li>
        <li class="fg-button ui-button ui-state-default active"><a href="#" aria-controls="Data" data-dt-idx="2" tabindex="0">1</a></li>
        <li class="fg-button ui-button ui-state-default "><a href="#" aria-controls="Data" data-dt-idx="3" tabindex="0">2</a></li>
        <li class="fg-button ui-button ui-state-default next" id="Data_next"><a href="#" aria-controls="Data" data-dt-idx="4" tabindex="0">Next</a></li>
        <li class="fg-button ui-button ui-state-default last" id="Data_last"><a href="#" aria-controls="Data" data-dt-idx="5" tabindex="0">Last</a></li>
    </ul>

【问题讨论】：

请格式化您的代码
看起来您可能需要实现自己的分页插件或看看这些：datatables.net/plug-ins/pagination。你上面的 HTML 是怎么生成的？
也许将vertical-align: middle; 添加到您的.ui-button
@nashcheez 没用。我已经发布了对我有用的解决方案

标签： jquery css pagination datatables

【解决方案1】：

我用下面的覆盖了默认的分页样式

.pagination>li { display: inline-block; }

Pagination Now
Pagination Before Fix

【讨论】：