Question

我在数据表中对齐分页号时遇到问题，下面是代码。

Datatables库用于动态生成包含分页和搜索功能的表。我使用CSS自定义了分页编号，但是对齐似乎不在网格中。

.dataTables_paginate a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.dataTables_paginate a.active {
    background-color: #4CAF50;
    color: white;
}

.dataTables_paginate a:hover:not(.active) {background-color: #ddd;}

分页未与网格对齐。

Datatable EJS

<h2><% var projectlist = JSON.parse(data); %></h2>
<table id="example" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">CSI ID</th>
      <th scope="col">App Name</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
     <!-- get projects array from the data property -->
<% var counter = 0; %>
<% var evale = 'CSI:'; %>

<% for (var key in projectlist) { %>

  <% if (projectlist.hasOwnProperty(key)) { %>
    <% var csiid = projectlist[key].name.substring(projectlist[key].name.lastIndexOf(":")+1,projectlist[key].name.lastIndexOf("]")); %>
    <% if (projectlist[key].name.match(evale)) { %>
    <% counter = counter + 1; %>
    <tr>
    <td><%= counter %></td>
    <td><%= csiid %></td>
    <td><%= projectlist[key].name.replace(/\[.*?\]\s?/g, '') %></td>
     <td>TESTED</td>
    </tr>
  <% } %>
  <% } %>
   <% } %>


  </tbody>
</table>

由datatables.js生成的Paginate运行时HTML

<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
    <a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="0" tabindex="0" id="example_previous">Previous</a>
    <span>
        <a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">33</a>
    </span>
    <a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a>
</div>

Answer 1

您可以使用以下css轻松完成此操作：

.dataTables_paginate{
display:flex;
align-items:center;
}
.dataTables_paginate a{
padding:0 10px;
}

显示flex将所有元素包装在单行中。对齐项目中心将元素垂直放置在中心位置。

Answer 2

你的＆＃34;明确的例子＆＃34;效果很好。

所以我认为一些需要的样式被声明在具有更高优先级的地方。

如果无法删除其他声明，请将 !important 添加到float。并添加display以确定。

...
.dataTables_paginate a {
    color: black;
    display: block !important;
    float: left !important;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
 }
 ...

当然，只有在CSS连接的情况下它才会起作用。

Answer 3

.dataTables_paginate a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.dataTables_paginate a.active {
    background-color: #4CAF50;
    color: white;
}

.dataTables_paginate a:hover:not(.active) {background-color: #ddd;}

<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
    <a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="0" tabindex="0" id="example_previous">Previous</a>
    <span>
        <a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">33</a>
    </span>
    <a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a>
</div>

这是你的。我工作得很完美。检入html文件并确保正确链接到css文件。也许您指出了错误的css文件路径。

在数据表中分页号列表对齐

3 个答案: